代码之家 › 专栏 › 技术社区 › Jason

如何自动打开“显示/隐藏javascript”选项卡并在第二次单击时重新隐藏

show-hide jquery javascript

Jason · 技术社区 · 7 年前

我有一些选项卡,单击时显示隐藏信息。但正如现在一样,它们将打开,但只有在单击新选项卡时才会关闭。如果可能,我可以在以下两个问题上获得帮助:

我想在您再次单击该选项卡时再次将其关闭。

2- 我设置了链接来打开每个部分开始的页面。我是否可以在单击该链接时自动打开选项卡?

我感谢你的帮助。

编辑以显示我现在拥有的完整代码:

$('.drop a').click(function() {
  var $content = $(this).parent().next().toggle();

  //HIDE THIS LINE IF YOU DO NOT WANT TO HIDE OTHER TABS ON CLICK
 $('.droptab').not($content).hide();
});

.droptab {
  display: none
}

<div class="child-page">

<a class="anchor" id="<?php echo $child->post_title; ?>"></a>        

<h2 class="child-title drop"><a><?php echo $child->post_title; ?><span class="down-arrow"><img src="down-arrow.png" /></span></a></h2>

<div class="droptab">

    <div class="description"><?php echo apply_filters('the_content', $child->post_content); ?></div>

    <aside class="sidebar">

        <div class="info">

            <div class="more-but">

                <a href="<?php the_field( 'get_more_url', $child->ID ); ?>" class="button left"><span class="caption">Get More Info</span></a>

            </div>

        </div>
                  
    </aside>

    <div style="clear: both;"></div>

</div><!-- .droptab -->

</div>

2 回复 | 直到 7 年前

Hey24sheep 7 年前

使用切换而不是隐藏显示。

toggle()方法在选定元素的hide()和show()之间切换。

隐藏此行“$('.droptab')。而不是($content)。Hide();”如果不想在单击时隐藏其他选项卡

$('.drop a').click(function() {
  var $content = $(this).parent().next().toggle();

  //HIDE THIS LINE IF YOU DO NOT WANT TO HIDE OTHER TABS ON CLICK
  $('.droptab').not($content).hide();
});

//ADD THIS LINE IF YOU WANT TO OPEN FIRST TAB BY DEFAULT ON PAGE LOAD
$('.droptab').first().toggle();

.droptab {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdowntabs">
  <a class="anchor" id="main-tab"></a> 
  <h2 class="drop">
    <a>MAIN TITLE</a>
  </h2>
  <div class="droptab">
    <p>MAIN TITLE CONTENT</p>
  </div>
  <a class="anchor" id="second-tab"></a> 
  <h2 class="drop">
    <a>SECOND TITLE</a>
  </h2>
  <div class="droptab">
    <p>SECOND TITLE CONTENT</p>
  </div>
</div>

FcoRodr 7 年前

toogle 代替当前链接并隐藏其他链接:

$('.drop a').click(function() {
  var content = $(this).parent().next();
  $('.droptab').not(content).hide(200);
  $(content).toggle(200);
});

$('.drop a').click(function() {
  var content = $(this).parent().next();
  $('.droptab').not(content).hide(200);
  $(content).toggle(200);
});

.droptab {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdowntabs">
  <a class="anchor" id="main-tab"></a> 
  <h2 class="drop">
    <a>MAIN TITLE</a>
  </h2>
  <div class="droptab">
    <p>MAIN TITLE CONTENT</p>
  </div>
  <a class="anchor" id="second-tab"></a> 
  <h2 class="drop">
    <a>SECOND TITLE</a>
  </h2>
  <div class="droptab">
    <p>SECOND TITLE CONTENT</p>
  </div>
</div>