javascript - 是否可以使用 html css 和 jquery 创建具有多列的下拉菜单(如大型菜单)而不使用任何插件？

Question

我必须创建一个包含两列的下拉菜单，就像图像一样，当我单击下拉菜单时，它应该像这样显示，到目前为止我还没有成功!这是我正在使用的示例代码。如果我执行此代码，它就不是我所期望的，而且我还是编码新手。

$(document).ready(function() {
  // NAV TOGGLE ONCLICK WITH SLIDE
  $(".clickSlide ul").hide();
  $(".clickSlide").click(function() {
    $(this).children("ul").stop(true, true).slideToggle("fast"),
      $(this).toggleClass("dropdown-active");
  });

  // NAV TOGGLE ONCLICK WITH FADE
  $(".clickFade ul").hide();
  $(".clickFade").click(function() {
    $(this).children("ul").stop(true, true).fadeToggle("fast"),
      $(this).toggleClass("dropdown-active");
  });

  // NAV TOGGLE ONHOVER WITH SLIDE
  $(".hoverSlide ul").hide();
  $(".hoverSlide").hover(function() {
    $(this).children("ul").stop(true, true).slideToggle("fast"),
      $(this).toggleClass("dropdown-active");
  });

  // NAV TOGGLE ONHOVER WITH FADE
  $(".hoverFade ul").hide();
  $(".hoverFade").hover(function() {
    $(this).children("ul").stop(true, true).fadeToggle("fast"),
      $(this).toggleClass("dropdown-active");
  });

});

/**/

#navbar {
  width: 100%;
  padding: 10 10 10 10;
}

#dropdown1 {
  width: 960px;
  margin: 0 auto;
  padding: 0;
  height: 1em;
  font-weight: bold;
}

#dropdown1 li {
  list-style: none;
  float: left;
}

#dropdown1 li a {
  padding: 0px 0px 0px 5px;
  text-decoration: none;
}

#dropdown1 li ul {
  display: none;
  background-color: #fff;
}

#dropdown1 li:hover ul,
#navbar li.hover ul {
  display: block;
  position: absolute;
  margin: 0;
  padding: 0;
}

#dropdown1 li:hover li,
#navbar li.hover li {
  float: left;
}

#dropdown1 li:hover li a,
#navbar li.hover li a {
  background-color: #fff;
  color: #000;
}

.topnav a {
  color: #000;
  text-decoration: none;
}

.topnav a:hover {
  border-bottom: 1px solid gold;
}

.column {
  display: inline-block;
  list-style-type: none;
  float: left;
  margin: 5px 0 0 0;
  padding: 0 5px 0 0;
  width: 500px !important;
}

.column li {
  float: left;
  display: inline;
}

.column a {
  color: #999;
  text-decoration: none;
  font-size: .7em;
}

.column a:hover {
  border-bottom: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
  <ul id=dropdown1>

    <li class="topnav">
      <div class="column">
        <a href="javascript:void(0)">Services <span>&#x25BC;</span></a>
        <ul>
          <li><a href="#">Web hosting</a></li>
          <li><a href="#">Web builder</a></li>
          <li><a href="#">Themes</a></li>
        </ul>

      </div>
      <div class="column">
        <ul>
          <li><a href="#">Web hosting</a></li>
          <li><a href="#">Web builder</a></li>
          <li><a href="#">Themes</a></li>
        </ul>
      </div>
  </ul>
</div>

Answer 1

如果我理解正确的话，

This jsfiddle也许有帮助

看起来你使用了两个 div 但有相同的类名，然后你的 css 只设置了“column”。

所以两个div将显示在相同的位置，这就是为什么你有两个div但只显示一个。

<div class="navbar">
<ul id=dropdown1> 

   <li class="topnav">
     <div class="column">
    <a href="javascript:void(0)">Services <span>&#x25BC;</span></a>
        <ul>
            <li><a href="#">Web hosting</a></li>
            <li><a href="#">Web builder</a></li>
            <li><a href="#">Themes</a></li>
        </ul>

    </div>
       <div class="column2">
       <ul>
            <li><a href="#">Web hosting</a></li>
            <li><a href="#">Web builder</a></li>
            <li><a href="#">Themes</a></li>
        </ul>
        </div>
</ul>

那么你应该设置column2的css

更新:

this fiddle

看上面这个 fiddle

我更改了 li 并设置

.column a:after{
    content:"\a";
    white-space: pre;
}

\a 表示换行符、字符 U+000A 和空格:pre 告诉浏览器在渲染时将其视为换行符。

在这里找到答案Line break (like <br>) using only css