Question

我在<li>中有<ul>个元素，我希望它们向下和向下扩展，每个元素都应该向下扩展。

HTML：

<ul class="answers">
    <li class="answer">
        <a href="#" class="expand">click</a>
        <p>adasdanvljskljfklsdklfsdjfkljsdkljfklsdjklfjskldjfklsdjklfjsdkfjksjdklfjs;dfl;sdkffsdfsdfsdfsfhowerjweklfjifjvjdfioverjgfioqwopiropqieopki</p>
    </li>
    <li class="answer">
        <a href="#" class="expand">click</a>
        <p>adasdanvljskljfklsdklfsdjfkljsdkljfklsdjklfjskldjfklsdjklfjsdkfjksjdklfjs;dfl;sdkffsdfsdfsdfsfhowerjweklfjifjvjdfioverjgfioqwopiropqieopki</p>
    </li>
    <li class="answer">
        <a href="#" class="expand">click</a>
        <p>adasdanvljskljfklsdklfsdjfkljsdkljfklsdjklfjskldjfklsdjklfjsdkfjksjdklfjs;dfl;sdkffsdfsdfsdfsfhowerjweklfjifjvjdfioverjgfioqwopiropqieopki</p>
    </li>
    <li class="answer">
        <a href="#" class="expand">click</a>
        <p>adasdanvljskljfklsdklfsdjfkljsdkljfklsdjklfjskldjfklsdjklfjsdkfjksjdklfjs;dfl;sdkffsdfsdfsdfsfhowerjweklfjifjvjdfioverjgfioqwopiropqieopki</p>
    </li>
</ul>

CSS：

ul {
    list-style: none;
}
li {
    width: 100%;
    height: 20px;
    overflow: hidden;
}

JS：

$(document).ready(function () {
    $('.expand').click(function () {
        $('.answer').css('height', 'auto');
    })
});

我遇到的问题是，当我点击展开按钮时，所有<li>元素都会展开。

Answer 1

您需要将其设置为特定于元素，而不是选择具有该类的所有元素（通过引用this）

对于您的标记，您可以将this与parent()结合使用：

$(document).ready(function(){
   $('.expand').click(function(){
     $(this).parent().css('height','auto');  
   });
});

jsFiddle here

Answer 2

定位点击的元素父级而不是所有.answers

$(document).ready(function(){
   $('.expand').click(function(){
      $(this).parent().css('height','auto');  
   })
});

http://jsfiddle.net/Tmm6R/小提琴

要切换其他人，请定位兄弟姐妹并将其设为默认

$(document).ready(function(){
   $('.expand').click(function(){
        $(this).parent().css('height','auto'); 
        $(this).parent().siblings().css("height", "20px");
   })
});

http://jsfiddle.net/Tmm6R/1/

如果您还希望打开的那个可以切换，您可以这样做：

$(document).ready(function(){
    $('.expand').click(function(){        
        var parent = $(this).parent();
        console.log(parent.css("height"));
        if(parent.css("height") > "20px"){
           parent.css("height", "20px");   
        } else {
           parent.css("height", "auto");   
        }

        $(this).parent().siblings().css("height", "20px");
    })
});

http://jsfiddle.net/TCxP5/

Answer 3

这个怎么样？ http://jsfiddle.net/StartStep/5svS8/ 问题出在overflow：hidden和jquery选择器

$('.expand').click(function(){
    $(this).parent('.answer').css({'height':'auto','overflow':'scroll'});  
})

Answer 4

我建议避免使用固定高度的样式。

添加样式=＆＃34;显示：无＆＃34;每个

：

<li class="answer"><a href="#" class="expand">click</a>
    <p style="display: none">adasdanvljskljfklsdklfsdjfkljsdkljfklsdjklfjskldjfklsdjklfjsdkfjksjdklfjs;dfl;sdkf
        fsdfsdfsdfsfhowerjweklfjifjvjdfioverjgfioqwopiropqieopki</p>
</li>

然后在你的javascript中执行此操作：

$(document).ready(function(){
   $('.expand').click(function(){
     $(this).parent().find("p").slideToggle();
   });
});

通过这种方式，您可以通过点击操作切换每个答案。

Answer 5

我会像这样实现你的代码：

<强> HTML ：

<ul class="answers">
  <li class="answer"><a href="#"></a>
  <p>adasdanvljskljfklsdklfsdjfkljsdkljfklsdjklfjskldjfklsdjklfjsdkfjksjdklfjs;dfl;sdkf
    fsdfsdfsdfsfhowerjweklfjifjvjdfioverjgfioqwopiropqieopki</p>
  </li>
  <li class="answer"><a href="#"></a>
  <p>adasdanvljskljfklsdklfsdjfkljsdkljfklsdjklfjskldjfklsdjklfjsdkfjksjdklfjs;dfl;sdkf
    fsdfsdfsdfsfhowerjweklfjifjvjdfioverjgfioqwopiropqieopki</p>
  </li>
  <li class="answer"><a href="#"></a>
  <p>adasdanvljskljfklsdklfsdjfkljsdkljfklsdjklfjskldjfklsdjklfjsdkfjksjdklfjs;dfl;sdkf
    fsdfsdfsdfsfhowerjweklfjifjvjdfioverjgfioqwopiropqieopki</p>
  </li>

  <li class="answer"><a href="#"></a>
  <p>adasdanvljskljfklsdklfsdjfkljsdkljfklsdjklfjskldjfklsdjklfjsdkfjksjdklfjs;dfl;sdkf
    fsdfsdfsdfsfhowerjweklfjifjvjdfioverjgfioqwopiropqieopki</p>
  </li>
</ul>

<强> CSS ：

 ul{
  list-style:none;
}
li { 
  width:100%; 
  height:20px; 
  overflow:hidden;
}
li.expanded {
  height:auto;
}
li.expanded > a:before {
  content:'Collapse';
}
li > a:before {
  content:'Expand';
}

<强> JS ：

$('li.answer > a').click(function(){
  $(this).parent().toggleClass('expanded');
});

如何使li元素向下滑动？

5 个答案:

Demo.