手风琴可扩展 可以向下滑动，但不会向上滑动 [英] accordian expandable it can slide down, but wont slide up

问题描述

这是代码，有人可以帮忙修改吗?

(函数($){$(document).ready(function() {//分类菜单打开//分类菜单打开$('.woocommerce.widget_product_categories .product-categories li.cat-parent').prepend('<div class="cat-menu-close"></div>');$( document ).on( "click", ".woocommerce.widget_product_categories .product-categories li.cat-parent:not(.opened) > .cat-menu-close", function(e) {$(this).parent().addClass('opened');$(this).next().next('ul.children').slideDown();});}) (jQuery);

谁能帮我修改一下

解决方案

要通过滑动效果切换"元素的可见性，您可以使用 slideToggle.

请注意，您需要从选择器中删除 :not(.opened)，因为当父元素具有此类时，处理程序将不起作用.

$(document).on("click", ".woocommerce.widget_product_categories .product-categories li.cat-parent > .cat-菜单关闭"，功能(e){var $catParent = $(this).closest('li.cat-parent');var state = $catParent.hasClass('close');$catParent.toggleClass('opened', !state);$(this).nextAll('ul.children:first').slideToggle(state);});

.cat-menu-close {光标:指针；}ul{列表样式:无；}ul.children {显示:无；}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="woocommerce widget_product_categories"><div class="product-categories"><ul><li class="cat-parent"><span class="cat-menu-close"><button>展开/折叠</button></span><div>随机同级元素</div><ul class="儿童"><li>子项</li><li>子项</li><li>子项</li>

here is the code, can someone help to modify?

(function($){
$(document).ready(function() {

// Categories menu opening
// Categories menu opening
$('.woocommerce.widget_product_categories .product-categories li.cat-parent').prepend('<div class="cat-menu-close"></div>');

$( document ).on( "click", ".woocommerce.widget_product_categories .product-categories li.cat-parent:not(.opened) > .cat-menu-close", function(e) {
    $(this).parent().addClass('opened');

    $(this).next().next('ul.children').slideDown();

});
}) (jQuery);

Can someone help me to modify

解决方案

To "toggle" element's visibility with sliding effect, you could use slideToggle.

Note that you need to remove :not(.opened) from the selector, because the handler won't work when this parent element has this class.

$(document).on("click", ".woocommerce.widget_product_categories .product-categories li.cat-parent > .cat-menu-close", function(e) {
  var $catParent = $(this).closest('li.cat-parent');
  var state = $catParent.hasClass('close');

  $catParent.toggleClass('opened', !state);

  $(this).nextAll('ul.children:first').slideToggle(state);
});

.cat-menu-close {
  cursor: pointer;
}

ul {
  list-style: none;
}

ul.children {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="woocommerce widget_product_categories">
  <div class="product-categories">
    <ul>
      <li class="cat-parent">
        <span class="cat-menu-close">
          <button>Expand/collapse</button>
        </span>
        
        <div>Random sibling element</div>
        
        <ul class="children">
          <li>Child item</li>
          <li>Child item</li>
          <li>Child item</li>
        </ul>
      </li>
    </ul>
  </div>
</div>

这篇关于手风琴可扩展 可以向下滑动，但不会向上滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！