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

【问题标题】：How to automatically open show / hide javascript tab and re-hide on second click如何自动打开显示/隐藏 javascript 选项卡并在第二次单击时重新隐藏
【发布时间】：2017-12-04 14:41:21
【问题描述】：

我有一些标签在点击时会显示隐藏信息。但就像现在一样，它们会打开，但只有在单击新选项卡时才会关闭。如果可能，我能否就这两个问题获得帮助：

1-我想让标签页在你再次点击时再次关闭。

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>

【问题讨论】：

标签： javascript jquery show-hide

【解决方案1】：

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

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

隐藏这一行“$('.droptab').not($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>

【讨论】：

它不像 OP 所希望的那样工作。你测试过吗？
@SebastianKaczmarek 更新了我的答案。感谢您指出。
仍然不是想要的效果。它应该关闭所有打开的下拉菜单并切换点击的下拉菜单
所以当我点击主标题时，它应该打开，如果任何其他标签打开，那么那些打开的标签应该关闭？
完成，我已经修改了我的答案。我不认为他需要那个，但无论如何。谢谢

【解决方案2】：

您可以使用toogle 代替当前链接并隐藏其他链接：

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

工作sn-p

$('.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>

【讨论】：