Javascript 使用jquery在单击时显示dd

我的页面中有

dl

，其中包含多个

dt

和

dd

。我只想隐藏所有

dd

，单击“dt”时除外。基本上我想建立水平导航栏

这是

表01
单击tab 01时显示的内容

表02
单击选项卡02时显示的内容

表03
单击选项卡03时显示的内容

$（文档）.ready（函数（）{
$（'.dl水平dt'）。单击（函数（）{
$（'.dl horizontal dt'）.removeClass（'unactive'））
$（this.next（）.toggleClass（'active'）；
});
});

因此，当我单击选项卡时，将显示选项卡内容。我如何使用jquery实现这一点

<dl class="dl-horizontal">
<span class='test'>
    <dt>Tabs 01</dt>
    <dd style="display:block;">
        <p>Content that is shown when tab 01 clicked</p>
    </dd>
</span>
<span class='test'>
    <dt>tab 02</dt>
    <dd style="display:none;">
        <p>Content that is shown when tab 02 clicked</p>
    </dd>
</span>
<span class='test'>
    <dt>tab 03</dt>
    <dd style="display:none;">
        <p>Content that is shown when tab 03 clicked</p>
     </dd>
</span>
     <span style="left: 222px; top: 28px; display: block;"></span>
</dl>

    $(document).ready(function(){
            $('dt').click(function(){
            $this = $(this);
            $show_dd = $this.closest('.test').find('dd');
            $('.test dd').hide();
            $show_dd.show();

        });
    });

表01 单击tab 01时显示的内容

表02 单击选项卡02时显示的内容

表03 单击选项卡03时显示的内容

$（文档）.ready（函数（）{ $（'dt'）。单击（函数（）{ $this=$（this）； $show_dd=$this.closest（'.test'）.find（'dd'）； $（'.test dd'）.hide（）； $show_dd.show（）； }); });

---

必需的jquery

一个类足够了。看看这个：

---

通过向选择器添加正确的类或伪选择器，您只能操作需要操作的元素。我在第一个

dd

中添加了

.active

，因为它是页面加载时的活动dd

$（文档）.ready（函数（）{
$（'.dl水平dt'）。单击（函数（）{
$（'dd.active:visible'）.hide（）.removeClass（'active'）；
$（this.next（'dd'）.show（）.addClass（'active'）；
});
});

表01
单击tab 01时显示的内容

表02
单击选项卡02时显示的内容

表03
单击选项卡03时显示的内容

您可以在单击事件时尝试addClass和removeClass

$(function(){
   //Event listener for <dt>
   $('dt').on('click',function({  
        //reset the inactive class to <dd>
        $('dd').addClass('inactive'); 
        //remove the inactive class and add active class 
        $(this).next('dd').removeClass('inactive').addClass('active');//method chaining           
   });    
});

$（函数（）{
//事件侦听器
$（'dt'）。在（'click'，函数（{
//将非活动类重置为
$（'dd'）.addClass（'inactive'）；
//删除非活动类并添加活动类
$（this）.next（'dd'）.removeClass（'inactive'）.addClass（'active'）；//方法链接
});    
});

试试这个：
如果你只想一次打开一个，不关闭任何开关，你甚至不需要类。只需向上滑动“其他”（使用
而不是
）并向下滑动选择（或者
隐藏（）
/
显示（）
，如果你喜欢更刺耳的体验）：


注意事项：


您的原始示例具有元素
style=
属性，这些属性将始终覆盖您添加的类CSS样式。这就是它不起作用的原因
试试这个


通过单击
dt
class
active
将被添加到元素中。添加类时
display:block
将应用到下一个
dd
，因为CSS相邻的同级选择器，即
dt.active+dd
如何显示单击的dt内容注意：您的HTML具有基于属性的样式，这将是在CSS中，总是优先于基于类的样式。我也注意到这是代码根本不起作用的实际原因。你根本不需要类来获得你想要的结果（回答如下）。您是否有一个JSFIDLE来处理此问题，因为它似乎不起作用？新的JSFIDLE确实起作用，但与您发布的代码不同。您可能需要更新您的答案选择第二个元素使第一个元素保持打开状态（无开关打开/关闭）。正确，谢谢！将
.active
添加到标记中的第一个
dd
可以解决这个问题。@TrueBlueAussie？很好地使用toggle，一个类是合适的（即使它仍然拼错），尽管代码暗示“其他”选项卡在打开时应该关闭。尽管它“有效”，我确实看到了你是如何在没有解释你所做的事情（例如，使用CSS相邻兄弟选择器）的情况下，独自一人对此投了赞成票的。此外，此处不需要委派事件处理程序，而且您没有限定
$dts
变量的作用域。@TrueBlueAusie，我不适合不限定$dts的作用域，它用于自动限定作用域的coffeescript。此外，我还遗漏了分号。关于事件委派，我看不出不在此处使用它的原因。有几个元素t倾听点击事件，因此授权将减少监控它们的开销，即使在这种情况下改进很小。正如您所说，在这种情况下，授权事件的好处是零，但您仍然需要编辑您的问题来解释您所做的事，因为CSS
+
可能对其他人来说并不明显：）
$('.dl-horizontal dt').click(function(){

    $(this).next().toggleClass('unactive');   

});

$(function(){
   //Event listener for <dt>
   $('dt').on('click',function({  
        //reset the inactive class to <dd>
        $('dd').addClass('inactive'); 
        //remove the inactive class and add active class 
        $(this).next('dd').removeClass('inactive').addClass('active');//method chaining           
   });    
});

$(document).ready(function () {
    $('.dl-horizontal dt').click(function () {
        var $dd = $(this).next('dd');
        $('.dl-horizontal dd').not($dd).slideUp();
        $dd.slideDown();
    });
});

<div class="container">
<div class="row">
    <div class="tabs">
        <dl class="dl-horizontal">
            <dt>Tabs 01</dt>
            <dd>
                <p>Content that is shown when tab 01 clicked</p>
            </dd>
            <dt>tab 02</dt>
            <dd>
                <p>Content that is shown when tab 02 clicked</p>
            </dd>
            <dt>tab 03</dt>
            <dd>
                <p>Content that is shown when tab 03 clicked</p>
             </dd>
             <span style="left: 222px; top: 28px; display: block;"></span></dl>
    </div>
    <div class="clearfix visible-lg"></div>
</div>

$(document).ready(function(){
        var $dts = $('.dl-horizontal dt');
        $('.dl-horizontal').on('click', 'dt', function(){
             $dts.removeClass('active');
             $(this).addClass('active');


        });

    });

dd {
  display: none;
}
dt.active + dd{
  display : block;  
}