如果在外部单击，则隐藏 div，但如果单击显示隐藏的切换 div 则不会答案

【问题标题】：Hide div if clicked outside it but not if the toggle div for show hide is clicked如果在外部单击，则隐藏 div，但如果单击显示隐藏的切换 div 则不会
【发布时间】：2023-03-15 20:40:01
【问题描述】：

我有一个侧面菜单mobile-navigation。我可以使用“按钮”-> hamburger-menu-div 在显示块和无显示块之间切换它。但这仅适用，只要我删除最后一个 Javascript 以在我在 mobile-navigation 外部单击时也将其隐藏。所以目前，我可以通过按钮打开它，但必须通过点击菜单或按钮来关闭它。切换不起作用。

我可以在最后一个 Javascript 中添加一个 id，这样如果我点击菜单和按钮，什么都不会触发？因为我认为这两个脚本相互“阻止”了这对我来说有意义，因为按钮试图显示菜单，而另一个脚本在我点击时试图隐藏它。

希望您能理解并感谢您的帮助！

//Toggle nav menu to show and hide

document.getElementById("hamburger-menu-div").addEventListener("click", function() {
    var x = document.getElementById("mobile-navigation");
    if (x.style.display === "block") {
        x.style.display = "none";
    }
    else
    {
        x.style.display = "block";
    }
});



//Hide it when clicked outside

document.addEventListener('mouseup', function(e) {
  var container = document.getElementById('mobile-navigation');
  if (!container.contains(e.target)) {
    container.style.display = 'none';
  }
});

.hamburger-menu-div {
  background-color: lightblue;
  width: 250px;
  height: 50px;
}

.mobile-navigation {
  background-color: lightgreen;
  width: 250px;
  display: none;
}

<div id="hamburger-menu-div" class="hamburger-menu-div">
BUTTON
</div>

<div id="mobile-navigation" class="mobile-navigation">
<p>- Navigationpoint 1</p>
<p>- Navigationpoint 2</p>
<p>- Navigationpoint 3</p>
<p>- Navigationpoint 4</p>
<p>- Navigationpoint 5</p>
</div>

添加整个代码：

//Toggle nav menu to show and hide
document.getElementById('hamburger-menu-div').addEventListener('click', e => e.currentTarget.nextElementSibling.classList.toggle('show'));

//Hide it when clicked outside
document.addEventListener('click', e => {
  if (!e.target.classList.contains('hamburger-menu-div'))
    document.getElementById('mobile-navigation').classList.remove('show')
});

.hamburger-menu-div {
  background-color: lightblue;
  width: 250px;
  height: 50px;
}

.mobile-navigation {
  background-color: lightgreen;
  width: 250px;
  display: none;
  position: fixed;
  right: 0;
  top: 0;
}

.mobile-navigation.show {
  display: block
}

<!--THIS IS THE MENU BUTTON/LIST POINT-->

<section class="elementor-section elementor-inner-section elementor-element elementor-element-571b5dd elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="571b5dd" data-element_type="section">
  <div class="elementor-container elementor-column-gap-default">
    <div class="elementor-row">
      <div class="aux-parallax-section elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-bc658a3" data-id="bc658a3" data-element_type="column">
        <div class="elementor-column-wrap elementor-element-populated">
          <div class="elementor-widget-wrap">
            <div class="elementor-element elementor-element-b81b33e hamburger-menu-div elementor-widget__width-initial elementor-view-default elementor-widget elementor-widget-icon" data-id="b81b33e" data-element_type="widget" id="hamburger-menu-div" data-widget_type="icon.default">
              <div class="elementor-widget-container">
                <div class="elementor-icon-wrapper">
                  <div class="elementor-icon">
                    <i aria-hidden="true" class="auxicon auxicon-menu-1">This div is the button</i> </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<!--PLEASE CONSIDER THAT OTHER ELEMENTS ARE BETWEEN THE BUTTON AND THE NAV MENU. THE NAV MENU IS INSERTED AS A COMPLETE OWN DIV. IT ISN´T A CHILD OR SIBLING OR WHATEVER OF THE MENU BUTTON/LIST-->


<section class="elementor-section elementor-top-section elementor-element elementor-element-852919c mobile-navigation elementor-section-boxed elementor-section-height-default show-nav" data-id="852919c" data-element_type="section" id="mobile-navigation"
  data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
  <div class="elementor-container elementor-column-gap-default">
    <div class="elementor-row">
      <div class="aux-parallax-section elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-10eb682" data-id="10eb682" data-element_type="column">
        <div class="elementor-column-wrap elementor-element-populated">
          <div class="elementor-widget-wrap">
            <div class="elementor-element elementor-element-6910634 title-nav elementor-widget elementor-widget-heading" data-id="6910634" data-element_type="widget" data-widget_type="heading.default">
              <div class="elementor-widget-container">
                <span class="elementor-heading-title elementor-size-default">Startseite</span> </div>
            </div>
            <section class="elementor-section elementor-inner-section elementor-element elementor-element-4a45e9c elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="4a45e9c" data-element_type="section">
              <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                  <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-4d35815" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
                    data-id="4d35815" data-element_type="column">
                    <div class="elementor-column-wrap elementor-element-populated">
                      <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-ac8c411 elementor-widget elementor-widget-heading" data-id="ac8c411" data-element_type="widget" data-widget_type="heading.default">
                          <div class="elementor-widget-container">
                            <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon-home-house-streamline"></i>&nbsp;&nbsp;Startseite</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
            <div class="elementor-element elementor-element-0e2ed13 title-nav elementor-widget elementor-widget-heading" data-id="0e2ed13" data-element_type="widget" data-widget_type="heading.default">
              <div class="elementor-widget-container">
                <span class="elementor-heading-title elementor-size-default">Leistungen</span> </div>
            </div>
            <section class="elementor-section elementor-inner-section elementor-element elementor-element-ee57cd6 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="ee57cd6" data-element_type="section">
              <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                  <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-5f47bf7" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
                    data-id="5f47bf7" data-element_type="column">
                    <div class="elementor-column-wrap elementor-element-populated">
                      <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-258d55c elementor-widget elementor-widget-heading" data-id="258d55c" data-element_type="widget" data-widget_type="heading.default">
                          <div class="elementor-widget-container">
                            <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon auxicon-earth-globe-streamline"></i>&nbsp;&nbsp;Domain</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
            <section class="elementor-section elementor-inner-section elementor-element elementor-element-0982174 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="0982174" data-element_type="section">
              <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                  <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-123693d" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
                    data-id="123693d" data-element_type="column">
                    <div class="elementor-column-wrap elementor-element-populated">
                      <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-67c041d elementor-widget elementor-widget-heading" data-id="67c041d" data-element_type="widget" data-widget_type="heading.default">
                          <div class="elementor-widget-container">
                            <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon auxicon-dashboard-1"></i>&nbsp;&nbsp;Hosting</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
            <section class="elementor-section elementor-inner-section elementor-element elementor-element-5c88b0e elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="5c88b0e" data-element_type="section">
              <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                  <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-0f53969" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
                    data-id="0f53969" data-element_type="column">
                    <div class="elementor-column-wrap elementor-element-populated">
                      <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-39b7fe0 elementor-widget elementor-widget-heading" data-id="39b7fe0" data-element_type="widget" data-widget_type="heading.default">
                          <div class="elementor-widget-container">
                            <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon auxicon-mac"></i>&nbsp;&nbsp;Webseitenerstellung</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
            <section class="elementor-section elementor-inner-section elementor-element elementor-element-7628bed elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="7628bed" data-element_type="section">
              <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                  <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-39c0f32" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
                    data-id="39c0f32" data-element_type="column">
                    <div class="elementor-column-wrap elementor-element-populated">
                      <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-5de4c14 elementor-widget elementor-widget-heading" data-id="5de4c14" data-element_type="widget" data-widget_type="heading.default">
                          <div class="elementor-widget-container">
                            <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon auxicon-repair"></i>&nbsp;&nbsp;Wartung</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
            <div class="elementor-element elementor-element-cd18a80 title-nav elementor-widget elementor-widget-heading" data-id="cd18a80" data-element_type="widget" data-widget_type="heading.default">
              <div class="elementor-widget-container">
                <span class="elementor-heading-title elementor-size-default">Über mich</span> </div>
            </div>
            <section class="elementor-section elementor-inner-section elementor-element elementor-element-468742a elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="468742a" data-element_type="section">
              <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                  <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-7a07457" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
                    data-id="7a07457" data-element_type="column">
                    <div class="elementor-column-wrap elementor-element-populated">
                      <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-dc04573 elementor-widget elementor-widget-heading" data-id="dc04573" data-element_type="widget" data-widget_type="heading.default">
                          <div class="elementor-widget-container">
                            <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon-profile-1"></i>&nbsp;&nbsp;Über mich</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
            <div class="elementor-element elementor-element-afffe9d title-nav elementor-widget elementor-widget-heading" data-id="afffe9d" data-element_type="widget" data-widget_type="heading.default">
              <div class="elementor-widget-container">
                <span class="elementor-heading-title elementor-size-default">Kontakt</span> </div>
            </div>
            <section class="elementor-section elementor-inner-section elementor-element elementor-element-5fabf81 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="5fabf81" data-element_type="section">
              <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                  <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-bba16fc" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
                    data-id="bba16fc" data-element_type="column">
                    <div class="elementor-column-wrap elementor-element-populated">
                      <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-4e40e5a elementor-widget elementor-widget-heading" data-id="4e40e5a" data-element_type="widget" data-widget_type="heading.default">
                          <div class="elementor-widget-container">
                            <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon-resend"></i>&nbsp;&nbsp;Kontakt</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

【问题讨论】：

标签： javascript menu click toggle mouseup

【解决方案1】：

您可以使用toggle() 与 CSS 中的类来显示它

//Toggle nav menu to show and hide
document.getElementById('hamburger-menu-div').addEventListener('click', e => e.currentTarget.closest('section').nextElementSibling.classList.toggle('show'));

//Hide it when clicked outside
document.addEventListener('click', e => {
  e.stopPropagation()
  if (!e.target.classList.contains('hamburger-menu-div') && !e.target.classList.contains('elementor-element') && !e.target.classList.contains('elementor-widget-wrap')) {
    console.log(e.target)
    document.getElementById('mobile-navigation').classList.remove('show')
  }
});

.hamburger-menu-div {
  background-color: lightblue;
  width: 250px;
  height: 50px;
}

.mobile-navigation {
  background-color: lightgreen;
  width: 250px;
  display: none;
}

.mobile-navigation.show {
  display: block
}

.elementor-widget-container {
  pointer-events: none;
  height: 100%;
}

<!--THIS IS THE MENU BUTTON/LIST POINT-->

<section class="elementor-section elementor-inner-section elementor-element elementor-element-571b5dd elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="571b5dd" data-element_type="section">
  <div class="elementor-container elementor-column-gap-default">
    <div class="elementor-row">
      <div class="aux-parallax-section elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-bc658a3" data-id="bc658a3" data-element_type="column">
        <div class="elementor-column-wrap elementor-element-populated">
          <div class="elementor-widget-wrap">
            <div class="elementor-element elementor-element-b81b33e hamburger-menu-div elementor-widget__width-initial elementor-view-default elementor-widget elementor-widget-icon" data-id="b81b33e" data-element_type="widget" id="hamburger-menu-div" data-widget_type="icon.default">
              <div class="elementor-widget-container">
                <div class="elementor-icon-wrapper">
                  <div class="elementor-icon">
                    <i aria-hidden="true" class="auxicon auxicon-menu-1">This div is the button</i> </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<!--PLEASE CONSIDER THAT OTHER ELEMENTS ARE BETWEEN THE BUTTON AND THE NAV MENU. THE NAV MENU IS INSERTED AS A COMPLETE OWN DIV. IT ISN´T A CHILD OR SIBLING OR WHATEVER OF THE MENU BUTTON/LIST-->


<section class="elementor-section elementor-top-section elementor-element elementor-element-852919c mobile-navigation elementor-section-boxed elementor-section-height-default show-nav" data-id="852919c" data-element_type="section" id="mobile-navigation"
  data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
  <div class="elementor-container elementor-column-gap-default">
    <div class="elementor-row">
      <div class="aux-parallax-section elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-10eb682" data-id="10eb682" data-element_type="column">
        <div class="elementor-column-wrap elementor-element-populated">
          <div class="elementor-widget-wrap">
            <div class="elementor-element elementor-element-6910634 title-nav elementor-widget elementor-widget-heading" data-id="6910634" data-element_type="widget" data-widget_type="heading.default">
              <div class="elementor-widget-container">
                <span class="elementor-heading-title elementor-size-default">Startseite</span> </div>
            </div>
            <section class="elementor-section elementor-inner-section elementor-element elementor-element-4a45e9c elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="4a45e9c" data-element_type="section">
              <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                  <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-4d35815" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
                    data-id="4d35815" data-element_type="column">
                    <div class="elementor-column-wrap elementor-element-populated">
                      <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-ac8c411 elementor-widget elementor-widget-heading" data-id="ac8c411" data-element_type="widget" data-widget_type="heading.default">
                          <div class="elementor-widget-container">
                            <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon-home-house-streamline"></i>&nbsp;&nbsp;Startseite</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
            <div class="elementor-element elementor-element-0e2ed13 title-nav elementor-widget elementor-widget-heading" data-id="0e2ed13" data-element_type="widget" data-widget_type="heading.default">
              <div class="elementor-widget-container">
                <span class="elementor-heading-title elementor-size-default">Leistungen</span> </div>
            </div>
            <section class="elementor-section elementor-inner-section elementor-element elementor-element-ee57cd6 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="ee57cd6" data-element_type="section">
              <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                  <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-5f47bf7" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
                    data-id="5f47bf7" data-element_type="column">
                    <div class="elementor-column-wrap elementor-element-populated">
                      <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-258d55c elementor-widget elementor-widget-heading" data-id="258d55c" data-element_type="widget" data-widget_type="heading.default">
                          <div class="elementor-widget-container">
                            <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon auxicon-earth-globe-streamline"></i>&nbsp;&nbsp;Domain</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
            <section class="elementor-section elementor-inner-section elementor-element elementor-element-0982174 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="0982174" data-element_type="section">
              <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                  <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-123693d" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
                    data-id="123693d" data-element_type="column">
                    <div class="elementor-column-wrap elementor-element-populated">
                      <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-67c041d elementor-widget elementor-widget-heading" data-id="67c041d" data-element_type="widget" data-widget_type="heading.default">
                          <div class="elementor-widget-container">
                            <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon auxicon-dashboard-1"></i>&nbsp;&nbsp;Hosting</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
            <section class="elementor-section elementor-inner-section elementor-element elementor-element-5c88b0e elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="5c88b0e" data-element_type="section">
              <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                  <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-0f53969" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
                    data-id="0f53969" data-element_type="column">
                    <div class="elementor-column-wrap elementor-element-populated">
                      <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-39b7fe0 elementor-widget elementor-widget-heading" data-id="39b7fe0" data-element_type="widget" data-widget_type="heading.default">
                          <div class="elementor-widget-container">
                            <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon auxicon-mac"></i>&nbsp;&nbsp;Webseitenerstellung</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
            <section class="elementor-section elementor-inner-section elementor-element elementor-element-7628bed elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="7628bed" data-element_type="section">
              <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                  <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-39c0f32" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
                    data-id="39c0f32" data-element_type="column">
                    <div class="elementor-column-wrap elementor-element-populated">
                      <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-5de4c14 elementor-widget elementor-widget-heading" data-id="5de4c14" data-element_type="widget" data-widget_type="heading.default">
                          <div class="elementor-widget-container">
                            <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon auxicon-repair"></i>&nbsp;&nbsp;Wartung</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
            <div class="elementor-element elementor-element-cd18a80 title-nav elementor-widget elementor-widget-heading" data-id="cd18a80" data-element_type="widget" data-widget_type="heading.default">
              <div class="elementor-widget-container">
                <span class="elementor-heading-title elementor-size-default">Über mich</span> </div>
            </div>
            <section class="elementor-section elementor-inner-section elementor-element elementor-element-468742a elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="468742a" data-element_type="section">
              <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                  <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-7a07457" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
                    data-id="7a07457" data-element_type="column">
                    <div class="elementor-column-wrap elementor-element-populated">
                      <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-dc04573 elementor-widget elementor-widget-heading" data-id="dc04573" data-element_type="widget" data-widget_type="heading.default">
                          <div class="elementor-widget-container">
                            <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon-profile-1"></i>&nbsp;&nbsp;Über mich</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
            <div class="elementor-element elementor-element-afffe9d title-nav elementor-widget elementor-widget-heading" data-id="afffe9d" data-element_type="widget" data-widget_type="heading.default">
              <div class="elementor-widget-container">
                <span class="elementor-heading-title elementor-size-default">Kontakt</span> </div>
            </div>
            <section class="elementor-section elementor-inner-section elementor-element elementor-element-5fabf81 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="5fabf81" data-element_type="section">
              <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                  <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-bba16fc" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
                    data-id="bba16fc" data-element_type="column">
                    <div class="elementor-column-wrap elementor-element-populated">
                      <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-4e40e5a elementor-widget elementor-widget-heading" data-id="4e40e5a" data-element_type="widget" data-widget_type="heading.default">
                          <div class="elementor-widget-container">
                            <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon-resend"></i>&nbsp;&nbsp;Kontakt</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

【讨论】：

您好，感谢您的快速帮助！就我而言，这不起作用。我认为问题出在.nextElementSibling 的某个地方@ html 的结构与这里不完全一样，并且 div 并不像这里那样直接位于另一个 div 之下。有没有办法为mobile-navigation 指定该值？第二个脚本单独工作正常。第一个甚至在单独使用时都不起作用。所以肯定有问题。你能帮忙吗？谢谢你！
另外的问题是，当我点击菜单本身时，它消失了......：/
添加了代码。在那里你可以看到，当插入两个 Javascript 时，它们都有问题。只有第二个 Javascript 在例如设置为 toggle 以切换类 show 时起作用。我认为第一个脚本中的值 .nextElementSibling 必须替换为更清晰的点，例如确切的 id/class mobile-navigation 但我不知道如何或我是否走在正确的道路上......谢谢为你的支持！ :)
当我点击任何东西时，菜单本身（移动导航 div）不应该消失......
嘿，感谢您的努力，但这对我不起作用。正如我已经提到的，对我来说最简单的解决方案是如果我可以同时将类添加到两个元素（用于移动导航和汉堡菜单）。然后我就不需要太多代码了。这不可能吗？不过还是非常感谢！