Javascript 如何使用html制作下拉菜单&；css_Javascript_Html_Css_Menu

Javascript 如何使用html制作下拉菜单&；css

javascript html css menu

Javascript 如何使用html制作下拉菜单&；css,javascript,html,css,menu,Javascript,Html,Css,Menu,我试图创建包含登录表单的html菜单，因此当我展开菜单时，会出现一个登录表单，问题是当我单击表单写入用户名或密码时，菜单会自动折叠，登录表单会在我写入任何内容之前消失是我的菜单和表单的图像 <body> <div class="wrapper-demo"> <div id="dd" class="wrapper-dropdown-3" tabindex="1"> <span>LogIn</span>

我试图创建包含登录表单的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></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>


登录


用户名

密码




函数WTF（）{
window.location.href=“”；
}
功能下拉列表（el）{
这1.dd=el；
this.placeholder=this.dd.children（'span'）；
this.opts=this.dd.find（'ul.dropdown>li'）；
this.val=''；
这个指数=-1；
this.initEvents（）；
}
DropDown.prototype={
initEvents:function（）{
var obj=这个；
obj.dd.on（'点击'，功能（事件）{
$（this.toggleClass（'active'）；
返回false；
});
}
}
$（函数（）{
var dd=新的下拉列表（$（'#dd'）；
$（文档）。单击（函数（）{
//所有下拉列表
$（'.wrapper-dropdown-3'）.removeClass（'active'）；
});
});

问题是您在

包装器本身以及文档上都有单击事件，任何对输入字段或周围区域的单击都会执行对包装器的单击，并根据您的逻辑切换状态。因此，任何单击其中的元素都会弹出到父元素并切换其状态，这就是为什么当您单击下拉列表中的任何输入字段或任何其他字段时，它会崩溃的原因。因此，一个快速的方法是确定事件的来源，如果它来自下拉触发器，则处理它，否则离开它
HTML标记更改：-在两者中都添加了一个名为dd
的类，以标识实际触发器的位置
<div id="dd" class="wrapper-dropdown-3 dd" tabindex="1"> 
    <span class="dd">LogIn</span>

如果更改HTML结构以将。下拉列表
从触发器所在的包装器中移出，则不会发生此问题。
问题是您在包装器
本身以及文档
上都有单击事件，只要单击输入字段或周围区域，就会执行对包装器的单击并切换根据你的逻辑陈述。因此，任何单击其中的元素都会弹出到父元素并切换其状态，这就是为什么当您单击下拉列表中的任何输入字段或任何其他字段时，它会崩溃的原因。因此，一个快速的方法是确定事件的来源，如果它来自下拉触发器，则处理它，否则离开它
HTML标记更改：-在两者中都添加了一个名为dd
的类，以标识实际触发器的位置
<div id="dd" class="wrapper-dropdown-3 dd" tabindex="1"> 
    <span class="dd">LogIn</span>

如果您更改HTML结构，将。下拉列表
从触发器所在的包装器中移出，则不会发生此问题。
我有一个非常好的、轻量级的代码，请查看此代码，它可以帮助您
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>

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;
}

如果您在使用时有任何问题，请告诉我
您可以在演示中查看此代码，这里是链接
我有一个非常好的、重量很轻的代码，请查看此代码，它可以帮助您
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>

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;
}

如果您在使用时有任何问题，请告诉我
您可以在演示中查看此代码，这里是链接
@user1814595请看这一部分帮助解决您的问题。谢谢您的帮助：）我复制了小提琴中的代码，并粘贴了它，但它不起作用。我是网页设计新手，请您详细告诉我应该做些什么，如果您有其他简单的代码，请给我。关键是为了识别实际触发器，我刚刚为元素添加了一个类LogIn
使用此提琴更改了类名称以触发并查看更改。感谢您的努力，它现在正在工作非常感谢：）@user1814595请看这有助于解决您的问题。感谢您的帮助：）我复制了代码在小提琴，因为它是和粘贴它，它没有工作，我是新的网页设计，所以你能告诉我我应该做的细节，如果你有另一个简单的代码，请把它给我这里你去。关键是为了识别实际的触发器，我刚刚为元素添加了一个类LogIn
使用此小提琴更改了类名称以触发并查看更改。感谢您的努力，它正在工作，非常感谢：）在下面签出我的答案解决您的问题下拉列表只能使用CSS。也许这会有帮助。在下面签出我的答案解决你的问题下拉列表只能使用CSS。也许这会有帮助。谢谢你的帮助，但我不知道该怎么办？？？我复制了你的代码并将其粘贴到一个空白的html页面中，但它不起作用我喜欢你的演示我需要制作这样的东西但菜单从顶部展开请详细告诉我该怎么做，因为我是网页设计新手提前感谢请创建一把你的代码，我将在我的代码中实现它让我知道谢谢陛下我对不起，我仍然很困惑我该怎么办：$？？将您的代码添加到我的代码中，或者创建一个空白html页面并粘贴您的代码？？是的，请进入聊天室谢谢您的帮助，但我不知道我应该做什么？？？我复制了你的代码并将其粘贴到一个空白的html页面中，但它不起作用我喜欢你的演示我需要制作这样的东西但菜单从顶部展开请详细告诉我该怎么做，因为我是网页设计新手提前感谢请创建一把你的代码，我将在我的代码中实现它让我知道谢谢陛下我对不起，我仍然很困惑我该怎么办：$？？将您的代码添加到我的代码中，或者制作一个空白html页面并粘贴您的代码？？是的，请进入聊天室