0

我有滑动切换菜单，单击它会打开隐藏的 div。h4 标签中有 4 个标题，它们在 div 中有自己的描述，并且 div 是隐藏的。因此，当用户单击标题时，隐藏的 div 会向下滑动并显示内容。现在我需要一个加号/减号切换，以便用户可以理解标题下的内容。这是我的代码

 <div class="getInsSection">
    <!--Start sec1-->
    <div class="sec1">
        <h4>HEADING 1 <span>-</span></h4>
      <div class="hideit first">
        <p>
            Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
        </p>
      </div>
    </div>
    <!--End sec1-->

    <!--Start sec2-->
    <div class="sec2">
        <h4>HEADING 2</h4>
      <div class="hideit">
        <p>
            Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
        </p>
      </div>
    </div>
    <!--End sec2-->

    <!--Start sec3-->
    <div class="sec3">
        <h4>HEADING 3</h4>
      <div class="hideit">
        <p>
            Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
        </p>
      </div>
    </div>
    <!--End sec3-->

    <!--Start sec4-->
    <div class="sec4">
        <h4>HEADING 4</h4>
      <div class="hideit">
        <p>
            Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
        </p>
      </div>
    </div>
    <!--End sec4-->

  </div>

jQuery代码

 $(window).load(function () {
    $('.first').show();
 });
 $(document).ready(function (){
    $('.hideit').hide();
    $('div:has(".hideit")').find('h4').click(function() {
       var elem = $(this).next('.hideit');
       if (elem.is(':visible')) {
           elem.slideUp();
       } else {
           ($('.hideit').slideUp()) (elem.slideDown());
       }
    });
 });

这是演示的链接。

4

0 回答 0