'如何修复'JQuery Dropdown inside dropdown''

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>