Question

我的页面中有dl，其中包含多个dt和dd。我只想隐藏所有dd，除了点击其中一个＆＃39; dt＆＃ 39 ;.基本上我想建立水平导航栏。

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

$(document).ready(function(){
        $('.dl-horizontal dt').click(function(){

            $('.dl-horizontal dt').removeClass('unactive')
            $(this).next().toggleClass('active');     

        });

});

所以当我点击标签时会显示标签内容。我怎样才能使用jquery

Answer 1

试试这个

http://jsfiddle.net/9kt6pdx5/14/

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

点击dt类active将添加到元素中。添加课程时display: block将应用于下一个dd，因为CSS邻近的兄弟选择器，即dt.active + dd

Answer 2

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

        });
    });

必需的jquery

Answer 3

一堂课就足够了。看看这个：http://jsfiddle.net/9kt6pdx5/3/

$('.dl-horizontal dt').click(function(){

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

});

Answer 4

您可以通过向选择器添加正确的类或伪选择器来操纵仅需要操作的元素。我已将.active添加到第一个dd，因为它是页面加载时的活动dd。

$(document).ready(function(){
        $('.dl-horizontal dt').click(function(){

            $('dd.active:visible').hide().removeClass('active');
            $(this).next('dd').show().addClass( 'active' );

        });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<dl class="dl-horizontal">
    <dt>Tabs 01</dt>
    <dd style="display:block;" class="active">
        <p>Content that is shown when tab 01 clicked</p>
    </dd>
    <dt>tab 02</dt>
    <dd style="display:none;">
        <p>Content that is shown when tab 02 clicked</p>
    </dd>
    <dt>tab 03</dt>
    <dd style="display:none;">
        <p>Content that is shown when tab 03 clicked</p>
     </dd>
     <span style="left: 222px; top: 28px; display: block;"></span>
</dl>

Answer 5

您可以在点击事件

上尝试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           
   });    
});

试试这个：jsfiddle

Answer 6

如果您只想一次打开一个，没有关闭切换，您甚至不需要课程。只需向上滑动“其他人”（使用not）并向下滑动选择（或hide() / show()，如果您更喜欢更刺耳的体验）：

http://jsfiddle.net/TrueBlueAussie/9kt6pdx5/8/

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

备注：

您的原始示例包含元素style=属性，这些属性将始终覆盖您添加的类CSS样式。这就是为什么它不起作用。

使用jquery在click上显示dd

6 个答案: