javascript - 这个函数打开一个div

Question

我有一个简单的脚本。那个显示和隐藏一个div。但我对“这个”有疑问。

这是我的脚本：

var accordion = $(".accordion"),
        content = $(".accordion .content"),
        button  = $(".accordion .btn-1");

    $(button, this).click(function(e){
        e.preventDefault();
        $(content, this).show();
    });

这是我的html

<div class="accordion">
    <img src="http://placehold.it/200x130" width="200" height="130" alt="">

    <div class="content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        </p>
    </div>
    <a href="#" title="More" class="btn-1">More</a>
</div>

但我有很多这样的 div。现在，当我点击 btn-1 时。所有的手风琴都打开了。我该如何解决？以及如何通过单击 btn-1 来关闭内容。

谢谢帮忙！！

Answer 1

您想在.content单击“按钮”时打开相应的元素。这可以使用DOM 遍历 ^[docs]轻松解决：

$(".accordion .btn-1").click(function(e) {
     e.preventDefault();

     // find the button's sibling with class 'content' and show it
     $(this).siblings('.content').show();

     // if you want to toggle the visibility, use .toggle instead
     $(this).siblings('.content').toggle();

     // if the structure is more complex, find the corresponding '.accordion'
     // element first and then search for the '.content' element
     $(this).closest('.accordion').find('.content').toggle();
});

我建议阅读jQuery 教程和API 文档。

Answer 2

单击按钮时，通过 .closest() 将 DOM 向上移动到具有类 'accordian' 的祖先，然后找到内部具有类 'content' 的项目。

$(,'.btn-1').on('click', function(e){
e.preventDefault():
$(this).closest('accordian').find('.content').show();
}

这使得 btn-1 的 DOM 定位和手风琴内相对于彼此的内容变得无关紧要——它们不必是兄弟姐妹——以防你出于某种原因需要在手风琴内移动它们。

Answer 3

你的 JS 有点奇怪，我想你想要做的是

var content = $(".accordion .content"),
    button  = $(".accordion .btn-1");

button.click(function(e){
    e.preventDefault();
    content.show();
});

如果我错了，请纠正我。您使用的意图this有点奇怪。