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

Question

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

1-我想在您第二次点击时再次关闭该选项卡。

2- 我设置了 links 以打开每个部分开始的页面。无论如何，我可以在单击 link 时自动打开选项卡吗？

感谢您的帮助。

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

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

Answer 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>

Answer 2

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

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

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

How to automatically open show / hide javascript tab and re-hide on second click

javascript

jquery

show-hide