Question

我的jQuery存在一个小问题，我真的看不出问题所在。我最近做了类似的事情。

我正在尝试在onClick事件上创建，一旦点击了div，div'mobileAccordian'就会向下滑动。

这是我的HTML：

   <ul id="left_nav">
    <li>
            <div class="shop_filter">
                    <span>Shop by Department</span>
            </div>
    </li>
    <div class="mobileAccordian">
        <li>
            Item one
        </li>

        <li>
            Item two
        </li>

    </div>
</ul>

所以我的目标是，我希望能够点击div.shop_filter，然后一旦点击它，'mobileAccordian'div将运行slideToggle方法。我假设我正在运行的Jquery方法发现'mobileAccordian'无法找到它。

这是我的jQuery。我知道点击功能正在运行，因为我尝试添加一个警告框。

jQuery("#left_nav li:first-child").click(function(){

   jQuery(this).next().find('.mobileAccordian').slideToggle(1000);

});

非常感谢任何帮助。试图了解方法之间的差异。 next（），parent（），find（）。

感谢。

Answer 1

您找不到合适的domElement

所以也许你应该尝试：

jQuery("#left_nav li:first-child").click(function(){

   jQuery(this).next('div.mobileAccordian').slideToggle(1000);

});

Answer 2

此处http://jsfiddle.net/6ZbVT/1/

您的HTML标记

<ul id="left_nav">
 <li>
   <a href="#" class="shop_filter" >Shop by Department</span>
 </li>
 <li class="mobileAccordian" >
   Item one
 </li>
 <li class="mobileAccordian">
   Item two
 </li>
</ul>

的js

jQuery( document ).ready( function() {
  jQuery('body').on('click', '.shop_filter', function(e){
    e.preventDefault();
    jQuery(this).parents().eq(1).find('.mobileAccordian').slideToggle(1000);
  });
});

的CSS

 .mobileAccordian { display: none; }

Answer 3

JSfiddle

对于标记极客...在li里面使用span并将其设置为display：block。现在你的代码就像这样

<div><ul id="left_nav">
    <li>
            <span class="shop_filter" data-accord="mobileAccordian" style="display:block;">
                    <span>Shop by Department</span>
            </span>
    </li>
</ul>
    <div class="mobileAccordian">
        <li>
            Item one
        </li>

        <li>
            Item two
        </li>

    </div>
</div>

脚本将是这样的

jQuery("#left_nav li:first-child").click(function(){ 
   var openAccord = jQuery(this).children('span').attr('data-accord');
   jQuery("."+openAccord).slideToggle(1000); //it will slide all accordians having class mobileAccordian
});

在jQuery中选择具有类名的元素

3 个答案: