Question

我有一个带登录/注册表单的下拉菜单，但是当我尝试点击表单内容时，菜单关闭。

我尝试用Javascript做一些事情，只有当我点击＆＃34; X＆＃34;按钮，但我没有成功。这是代码：

＆＃13;

"FCBDA"

＆＃13;

function animaIcon(x){
	x.classList.toggle("change");
}

function myFunction() {
	document.getElementById("myDropdown").classList.toggle("show");
}

$('.container').on('click', function() {
	if ($('.dropdown-content').css('opacity')==0) $('.dropdown-content').css('opacity', 0.95);
	else $('.dropdown-content').css('opacity', 0);
});

＆＃13;

Answer 1

pan[beNumber].addClickListener(new MouseEvents.ClickListener() {

                        private static final long serialVersionUID = 1L;

                        @Override
                        public void click(MouseEvents.ClickEvent event) {

                                    // Create a sub-window and set the content
                            Window subWindow = new Window("Patient Transfer", new WardMovementView());
                             subWindow.setCaptionAsHtml(true);
                             subWindow.setModal(true);
                             subWindow.setWidth("1200px");
                             subWindow.setHeight("800px");
                           UI.getCurrent().addWindow(subWindow);

                         }
                    });

function animaIcon(x) {
  x.classList.toggle("change");
}

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
  $('.modal').toggle();
}

$('.container').on('click', function() {
  if ($('.dropdown-content').css('opacity') == 0) $('.dropdown-content').css('opacity', 0.95);
  else $('.dropdown-content').css('opacity', 0);
});

body {
  background-color: blue;
}
/* HAMBURGUER MENU */

.icone-menu {
  width: 100%;
  float: right;
  padding: 18px 8%;
}
.container {
  display: block;
  cursor: pointer;
  float: right;
  position: relative;
}
.dropdown-content {
  /*display: none;*/
  background-color: #111;
  width: 100vw;
  height: 100vh;
  margin-top: -55px;
  margin-left: -310px;
  position: absolute;
  opacity: 0;
  -webkit-transition: all 1s ease-in-out;
}
.dropdown-content a {
  font-weight: bold;
  font-size: 150%;
  color: white;
  padding: 100px 18px;
  display: block;
  float: left;
}
.down-botao a {
  color: #11E77C;
  font-weight: bold;
}
.dropdown-content button {
  padding: 10px;
  width: 40%;
  margin-left: 15px;
  font-weight: bolder;
  border-radius: 15px;
  background-color: black;
  border-style: solid;
  border-color: #dd3910;
  color: white;
}
.modal {
  background-color: #fff;
  width: 400px;
  padding: 30px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  min-height: 420px;
  display: none;
}
.tab {
  float: left;
}
tab:first-of-type {
  margin-right: 15px;
}
.dropdown-content a:hover {
  color: #13c7ae;
}
.show {
  opacity: 0.95;
  transition: opacity 1s ease-in-out;
}
.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  background-color: white;
  margin: 6px auto;
  transition: 0.4s;
  position: relative;
  z-index: 1000;
}
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
  opacity: 0;
}
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

Answer 2

以下是用户点击.container中的元素时发生的情况：

点击事件是目标元素上的触发器
事件向DOM的根目标移动，在它找到的每个元素上触发它自己（术语“触发”可能会产生误导;事件只被“触发”一次）。
当它到达.container时，将调用您的回调函数并折叠下拉菜单。

要解决此问题，请确保.container（您希望 NOT 触发下拉菜单的崩溃）中的元素的所有点击事件都会停止该事件的传播。

$('.container .buttons').on('click',function(e) {
    e.stopPropagation();
    // do whatever
});

Answer 3

好的，能够使用此javascript代码修复它：

$( "#btn-menu" ).click(function() {
	  $(".dropdown-content").toggle("slow");
	});

单击它（任何地方）时，下拉菜单关闭

3 个答案: