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

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 方法。我假设我正在运行以查找“mobileAccordian”的 Jquery 方法无法找到它。

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

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

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

});

任何帮助将非常感激。试图让我了解这些方法之间的差异。下一个（），父（），查找（）。

谢谢。

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
});