Jquery - 使用“this”动态显示和隐藏答案

【问题标题】：Jquery - using "this" to dynamically show and hideJquery - 使用“this”动态显示和隐藏
【发布时间】：2013-10-02 16:09:20
【问题描述】：

<div class="show_hide panel-header" rel="#panel">
    <h4>Disclaimer</h4>
</div>
<div id="panel" class="panel">
    <p>Lorem ipsum</p>
</div>

上面是我的 HTML ... header（事件处理程序）的简单 div 和隐藏 div显示隐藏。非常适合简单的显示/隐藏，但我可能一次在屏幕上有几个面板，我不想明确标识每个面板并赋予它自己的功能。如何使用this选择器实现动态交互？

我的 JQuery 目前：

<script type="text/javascript">
    $(document).ready(function(){
        $(".panel").hide();
        $(".show_hide").show(); //Probably don't need this line...
        $('.show_hide').click(function(){
            $(this).children("div").slideToggle();
        });           
    });
</script>

感谢任何帮助。我是 JS/JQuery 的新手，在理解不同的选择器时遇到了一些麻烦。谢谢！

【问题讨论】：

标签： javascript jquery this show-hide

【解决方案1】：

您的div 不是孩子，它是next div 行：

$(this).next("div.panel").slideToggle();

【讨论】：

【解决方案2】：

你可以试试这个

<script type="text/javascript">
    $(document).ready(function(){
        $(".panel").hide();
        $('.show_hide').click(function(){
            $(this).next(".panel").slideToggle();
        });           
    });
</script>

【讨论】：