Question

我正在使用多个下拉菜单在我的网站中设置简历

我已经尝试过youtube教程和CSS / jQuery

<div0 class="dropdown">
    <button class="button"><img src="resume start.PNG" alt="resume" width="auto" height="auto"></button>
    <div00 style="display:none;" id="dropcontent">
    <img src="resume detail.PNG" alt="detail" width="auto" height="auto">
        <div000>
            <button class="button1"><img src="career goal-objective.png" alt="career goal/objective" width="auto" height="auto"></button>
                <div0000 style="display:none;" id="dropdown">
                    <img src="job goal.png" alt="job goal" width="auto" height="auto">
                </div0000>
        </div000>
    </div00>
</div0>




$(document).ready(function(){
  $("div0").click(function(){
    $("div00").toggle();
     });
});
$(document).ready(function(){
  $("div000").click(function(){
    $("div0000").toggle();
     });
});

我希望该下拉菜单可以作为正常的下拉菜单，但实际上它会打开该下拉菜单，然后另一个关闭该下拉菜单。但是当它再次打开时，它的第二个下拉菜单也打开了

Answer 1

您需要检查div是否在jquery中可见...切换开关将可见性设置为打开，但是没有关闭可见性的操作...像这样，尝试一下

$(document).ready(function(){
  $("div0").click(function(){

  if($("div0000").is(":visible")) {
        $("div0000").toggle();
  }

    $("div00").toggle();
     });
});
    $(document).ready(function(){
  $("div000").click(function(){

    if($("div00").is(":visible")) {
        $("div00").toggle();
    }

    $("div0000").toggle();
     });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div0 class="dropdown">
    <button class="button"><img src="resume start.PNG" alt="resume" width="auto" height="auto"></button>
    <div00 style="display:none;" id="dropcontent">
    <img src="resume detail.PNG" alt="detail" width="auto" height="auto">
        <div000>
            <button class="button1"><img src="career goal-objective.png" alt="career goal/objective" width="auto" height="auto"></button>
                <div0000 style="display:none;" id="dropdown">
                    <img src="job goal.png" alt="job goal" width="auto" height="auto">
                </div0000>
        </div000>
    </div00>
</div0>

'如何修复下拉菜单中的'jQuery下拉菜单'

1 个答案: