1

我正在尝试创建包含登录表单的html菜单，所以当我展开菜单时，会出现一个登录表单，问题是当我单击表单以写入用户名或密码时，菜单会自动折叠并且登录表单消失在我在里面写任何东西之前

这是我的菜单和其中的表格的图像。

<body>
  <div class="wrapper-demo">
    <div id="dd" class="wrapper-dropdown-3" tabindex="1">   
      <span>LogIn</span>
      <ul class="dropdown">
        <li>
          Username<input type="text" id="UN"><br/>
          password<input type="text" id="pass"><br/>
          <input type="submit" id="login" value="login">
        </li>
      </ul>
    </div>​&lt;/div>
  </div>
  <!-- jQuery if needed -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script type="text/javascript">
    function WTF() {
      window.location.href = "";
    }
    function DropDown(el) {
      this.dd = el;
      this.placeholder = this.dd.children('span');
      this.opts = this.dd.find('ul.dropdown > li');
      this.val = '';
      this.index = -1;
      this.initEvents();
    }
    DropDown.prototype = {
      initEvents: function () {
        var obj = this;
        obj.dd.on('click', function (event) {
          $(this).toggleClass('active');
          return false;
        });
      }
    }
    $(function () {
      var dd = new DropDown($('#dd'));
      $(document).click(function () {
        // all dropdowns
        $('.wrapper-dropdown-3').removeClass('active');
      });
    });
  </script>
</body>
4

2 回答 2

1

问题是您wrapper本身以及对document输入字段或周围区域的任何点击都有点击事件，执行对包装器的点击并根据您的逻辑切换状态。因此，对内部元素的任何单击都会冒泡到父级并切换其状态，这就是为什么当您单击下拉列表中的任何输入字段或任何其他字段时它会折叠的原因。因此，一种快速的方法是识别事件来自的位置，如果它来自下拉触发器，则处理它，否则离开它。

小提琴

HTML 标记更改：- 添加了一个dd对两者都调用的类，以识别实际触发器的位置。

<div id="dd" class="wrapper-dropdown-3 dd" tabindex="1"> 
    <span class="dd">LogIn</span>

脚本

DropDown.prototype = {
      initEvents: function () {
          var obj = this;
          obj.dd.on('click', function (event) {
              event.stopPropagation(); //Stop propagation
              if (event.target.className === 'dd') { //check for specfic targets
                  $(this).toggleClass('active');

              }
              return false;

          });
      }
  }

如果您更改 HTML 结构以将其.dropdown移出与触发器相同的包装器，则不会发生此问题。

于 2013-05-15T04:10:50.493 回答
0

我有一个非常好的和轻量级的代码，看看这个它可以帮助你

html代码

<div class="wrapper-demo">
    <div id="dd" class="wrapper-dropdown-3" tabindex="1">   
          <span onclick="uiDrop(this,'#topDrop', false)">LogIn</span>
          <ul class="dropdown" id="topDrop">
            <li>
              <label>Username</label> 
              <input type="text" id="UN">
            </li>
            <li>
              <label>password</label>
              <input type="text" id="pass">
            </li>
            <li>
              <input type="submit" id="login" value="login">
            </li>
          </ul>
    </div>​
</div>

jQuery代码

function uiDrop(ths,target, auto){  
// target means that div which has to slidetoggle
// auto means target div hide  auto 

        if( $(target).is(':visible'))
            $(target).slideUp('fast');
        else
            $(target).slideDown('fast');

        $(target).mouseup(function(e){
            e.preventDefault();
            return false;
        });

        $(document).unbind('mouseup');  
        $(document).mouseup(function(e){
            if(auto)
                $(target).slideUp('fast');
            else
            {   
                //if($(e.target).parent(target).length==0)          
                $(target).slideUp('fast');
            }       
        });
};

css

.dropdown {
    display:none;
    list-style:none;
    background:#f7f7f7;
    padding:10px;
    border:1px solid #ddd;
}

.dropdown li{
   display:block;
}
.wrapper-dropdown-3{
   position:relative; width:200px;
}
#dd span{
   display:block; 
   background:#f7f7f7; 
   height:30px; 
   line-height:30px; 
   padding:0 10px;
}

如果您在使用时有任何问题，请告诉我，您可以在演示中查看此代码，这里是链接 http://visualdecoder.com/plugins/ddSlide/demo.html

于 2013-05-15T05:09:01.250 回答