Question

我使用这个jQuery代码来处理何时单击.item div以向下滑动手风琴，并向上滑动已打开的.item div手风琴（如果存在）：

$(".item").on("click", function() { 
 $(".itemchildren:visible").slideUp(100);   
  if (!$(this).next().is(":visible")) {         
    $(this).next().slideDown(100);
   } 
});

我还有这个，当单击.item div的手风琴中的.itemchildren-item div时，会添加.selected类，当单击另一个.item div中的.itemchildren-item div时，删除.active类：

$('.itemchildren-item').click(function() {
    var $thisitem = $(this);
    var $ancestor = $thisitem.parents('.itemchildren').prev();
    var $acs = $(".item");
    $acs.each(function( index, value ){
    $acs.eq(index).removeClass('selected');
    });
        $ancestor.addClass('selected');
});

我想要一个jQuery代码，如果.item div有.selected类，不要关闭那个.selected div的手风琴，只有当另一个.item div获得.selected类时才关闭它。

手风琴的HTML结构：

<!--first item (has selected class by default)-->
<div class="flex item expand selected">
    <div class="flex icon">
        <i aria-hidden="true" class="fa fa-desktop"></i>
    </div>
    <div class="flex text">
        Dashboard
    </div>
</div>

<!--accordion content of first item-->
<div class="flex itemchildren">
    <a class="flex itemchildren-item">
        <div class="text">
            Home
        </div>
    </a>
    <a class="flex itemchildren-item">
        <div class="text">
            Contact
        </div>
    </a>
</div>

<!--Second item-->
<div class="flex item expand">
    <div class="flex icon">
        <i aria-hidden="true" class="fa fa-bars"></i>
    </div>
    <div class="flex text">
        Menus
    </div>
</div>

<!--accordion of second item-->
<div class="flex itemchildren">
    <a class="flex itemchildren-item">
        <div class="text">
            All Menus
        </div>
    </a>
    <a class="flex itemchildren-item">
        <div class="text">
            Add New Menu
        </div>
    </a>
</div>

Answer 1

我添加了各个功能并检查了所选的＆＃39; class在项目上，因此如果未设置类，它将仅触发slideUp（）。我创建了my_slideup函数以使其更清晰。

＆＃13;

$(".item").each(function(){	
    $(this).on("click", function() {
           
        //slides up function for all children
        my_slideUp();
        //if it hasn't got the selected class slidedown
        if(!$(this).hasClass('selected')){
             if ($(this).children('.itemchildren').is(':visible')){		
                 $(this).children('.itemchildren').slideUp(100);
             } else {
                 $(this).children('.itemchildren').slideDown(100);
             }   
         } 
    });
});

//my_slideup function
function my_slideUp(){
  $(".item").each(function(){
     if(!$(this).hasClass('selected')){ 
       $(this).children('.itemchildren').slideUp(100);
     }
  });
}
//adding selected class to parent
$('.itemchildren-item').on('click',function() {
     //remove all selected classes first
     $(".item").removeClass('selected'); 
     $(this).parent().parent().addClass('selected'); 
});

＆＃13;

.item {
   padding: 10px;
   border: 1px solid #CCC;
   width: 100%;
}
.itemchildren {
   padding: 10px;
   border: 1px solid #CCC;
   background: #fefefe;
   width: 100%;
   display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--first item (has selected class by default)-->
<div class="flex item expand">
  <div class="flex icon">
        <i aria-hidden="true" class="fa fa-desktop"></i>
  </div>
  <div class="flex text">
        Dashboard
  </div>
  <!--accordion content of first item-->
  <div class="flex itemchildren">
      <a class="flex itemchildren-item">
          <div class="text">
              Home
          </div>
      </a>
      <a class="flex itemchildren-item">
          <div class="text">
              Contact
          </div>
      </a>
  </div>
</div>
<!--Second item-->
<div class="flex item expand">
    <div class="flex icon">
        <i aria-hidden="true" class="fa fa-bars"></i>
    </div>
    <div class="flex text">
        Menus
    </div>


    <!--accordion of second item-->
    <div class="flex itemchildren">
        <a class="flex itemchildren-item">
            <div class="text">
                All Menus
            </div>
        </a>
        <a class="flex itemchildren-item">
            <div class="text">
                Add New Menu
            </div>
        </a>
    </div>
 </div>

＆＃13;

希望这有帮助。

当任何其他兄弟选择其中的类时，请不要向上滑动该特定兄弟的手风琴

1 个答案: