jQuery 函数需要单击两次才能运行但希望第一个 div 可见

Question

我创建了一个下拉菜单，您可以在其中选择三个要显示的 div。我希望第一个 div 在页面加载时显示，当从下拉列表中选择一个选项时，div 会更改为选定的那个。 所有 div 都在同一位置，因此它们在单击时相互替换。这是可行的，但是因为第一个 div 没有设置为“display: none”，所以脚本首先触发以隐藏它。我不知道如何跳过第一个隐藏，而是立即切换到另一个 div。

除此之外，我希望该功能仅在 div 之间切换而不是完全隐藏它，以便始终显示内容。

提前致谢！

我正在使用这个功能：

<script type="text/javascript">
jQuery(document).ready(function($){
  $('.toggle').on('click', function(){
    var targetBox = $(this).attr('target-box'); // Find the target box

    $('.box').not(targetBox).hide(500); // Hide all other boxes
    
    $(targetBox).toggle(500); // Toggle the current state of this one
  });
});</script>

还有这个 HTML：

<ul class="dropdown">      
        <li class="-selector">
            <a>Choose &#9662;</a>
            <ul class="dropdown-lb">
                <li><a class="toggle" target-box="#box1">Selector 1</a></li>
                <li><a class="toggle" target-box="#box2">Selector 2</a></li>
                <li><a class="toggle" target-box="#box3">Selector 3</a></li>
            </ul>
        </li>
    </ul>


<div class="box1 box">CONTENT HERE<div>
<div class="box2 box" style="display:"none">CONTENT HERE<div>
<div class="box3 box" style="display:"none">CONTENT HERE<div>

Answer 1

您的 html 中有一些问题。

您在target-box (target-box="#box3") 中使用了#，但您想向我们展示的内容是有课程而不是id。

也看看这条线<div class="box2 box" style="display:"none">CONTENT HERE<div>
你没有正确关闭div，你的style里面有一个"

演示

jQuery(document).ready(function($) {
  $('.toggle').on('click', function() {
    var targetBox = $(this).attr('target-box'); // Find the target box

    $('.box').not(targetBox).hide(500); // Hide all other boxes

    $(targetBox).show(500); // Toggle the current state of this one
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="dropdown">
  <li class="-selector">
    <a>Choose &#9662;</a>
    <ul class="dropdown-lb">
      <li><a class="toggle" target-box=".box1">Selector 1</a></li>
      <li><a class="toggle" target-box=".box2">Selector 2</a></li>
      <li><a class="toggle" target-box=".box3">Selector 3</a></li>
    </ul>
  </li>
</ul>


<div class="box1 box">CONTENT HERE
</div>
<div class="box2 box" style="display: none ">CONTENT HERE
</div>
<div class="box3 box " style="display: none">CONTENT HERE
</div>