文章/答案/技术大牛

发布

社区首页 >问答首页 >显示在边上的下拉内容

问显示在边上的下拉内容
EN

Stack Overflow用户

提问于 2018-10-09 17:59:06

回答 2查看 219关注 0票数 2

我已经创建了一个多个下拉式侧面板，但是正如您在this fiddle中看到的，它显示的是in-line。

所有我想要的是内容显示在旁边的侧面板，而不是in-line。

我尝试修改每个dropdown的display属性，但是什么都没有做(或者让事情变得更糟)。由于这些下拉列表是在hover发生时显示的，所以当指针位于两个下拉列表的限制时，这真的很尴尬。

.sidebar {
    height: 94%;
    width: 0;
    position: fixed;
    z-index: 4;
    top: 0;
    right: 0;
    background-color: #111;
    overflow: auto;
    padding-top: 60px;
    transition: 0.5s;
}

.sidebar .dropdown {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}
.sidebar .dropdown-2{
    padding: 4px 4px 4px 16px;
    text-decoration: none;
    font-size: 20px;
    display: block;
    transition: 0.3s;
}

.sidebar .dropdown:hover {background-color: #900000;color:black;}
.sidebar .dropdown-2:hover {background-color: #483D8B;}

.sidebar .closebtn {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 36px;
    margin-left: 25px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
  position:fixed;
  margin-top:25px;
  margin-right:25px;
  top:0;
  right:0;
}

.openbtn:hover {background-color: #444;}

.dropdown{position:relative; display:inline-block;}
.dropdown-2{position:relative; display:inline-block;}

.dropdown-content{
    display:none;
    position:absolute;
    background-color:#f1f1f1;
    min-width:160px;
    box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index:4;
    font-size:15px;
    color:black;
}
.dropdown-content-2{
    display:none;
    position:absolute;
    background-color:#f1f1f1;
    min-width:160px;
    box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index:4;
    font-size:15px;
    color:black;
}

.dropdown-content a{
    color:black;
    padding:24px 16px;
    text-decoration:none;
    display:block;
}
.dropdown-content-2 a{
    color:black;
    padding:24px 16px;
    text-decoration:none;
    display:block;
}

.dropdown-content a:hover{background-color:#ddd;}
.dropdown-content-2 a:hover{background-color:#ddd;}

.dropdown:hover .dropdown-content{display:block;}
.dropdown-2:hover .dropdown-content-2{display:block;}

.size{width:60px; height:40px;}

.dropdown-2 p{display: inline-block;}

a{color:white;}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

<button class="openbtn" onclick="openNav()">&#9776; Symboles pour SITAC</button>
<div id="mySidebar" class="sidebar">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="dropdown">Sectorisation
    <div class="dropdown-content">
      <div class="dropdown-2"><p>Secteurs</p>
        <div class="dropdown-content-2">
          <p>Chef de Groupe</p><br>
          <p>Chef de colonne</p><br>
          <p>Chef de Site</p>
        </div>
      </div>
      <div class="dropdown-2"><p>Sectorisation Fonctionelle</p>
        <div class="dropdown-content-2">
          <p>Alimentation, eau</p><br>
          <p>divers</p><br>
          <p>Incendie</p><br>
          <p>SAP</p><br>
          <p>Spécialisé</p>
        </div>
      </div>
      <div class="dropdown-2"><p>Sectorisation Géographique</p>
        <div class="dropdown-content-2">
         <p>Limite Secteur Géographique</p>
        </div>
      </div>
    </div>
  </div>
</div>
<script> //script to open the sidepanel
    function openNav(){document.getElementById("mySidebar").style.width = "250px";}
    function closeNav(){document.getElementById("mySidebar").style.width = "0px";}
</script>

这里的每一个答案都是好的，但我在试着重复什么是in here

javascript

html

css

回答 2

Stack Overflow用户

发布于 2018-10-09 18:17:18

你可以按照下面的步骤来做

   $('#nav ul').hide();

   $('#nav li > a').hover(
      function () {
      //show its submenu
        $(this).parent().children('ul').stop().slideDown(100);
      }
    );
   $('#nav li').hover(null, 
      function (e) {
      //hide its submenu
        $(this).children('ul').stop().slideUp(100);
      }
   );

以下是js代码，您可以在此堆栈溢出答案链接上找到完整答案。

DropDown multilevel menu with hover

和

这是http://jsfiddle.net/7GGab/1/

票数 2

Stack Overflow用户

发布于 2018-10-09 19:14:40

从.dropdown-content和.dropdown-content-2中删除position:absolute，您就会得到想要的结果。

.sidebar {
    height: 94%;
    width: 0;
    position: fixed;
    z-index: 4;
    top: 0;
    right: 0;
    background-color: #111;
    overflow: auto;
    padding-top: 60px;
    transition: 0.5s;
}

.sidebar .dropdown {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}
.sidebar .dropdown-2{
    padding: 4px 4px 4px 16px;
    text-decoration: none;
    font-size: 20px;
    display: block;
    transition: 0.3s;
}

.sidebar .dropdown:hover {background-color: #900000;color:black;}
.sidebar .dropdown-2:hover {background-color: #483D8B;}

.sidebar .closebtn {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 36px;
    margin-left: 25px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
  position:fixed;
  margin-top:25px;
  margin-right:25px;
  top:0;
  right:0;
}

.openbtn:hover {background-color: #444;}

.dropdown{position:relative; display:inline-block;}
.dropdown-2{position:relative; display:inline-block;}

.dropdown-content{
    display:none;
    /*position:absolute;*/
    background-color:#f1f1f1;
    min-width:160px;
    box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index:4;
    font-size:15px;
    color:black;
}
.dropdown-content-2{
    display:none;
    /*position:absolute;*/*
    background-color:#f1f1f1;
    min-width:160px;
    box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index:4;
    font-size:15px;
    color:black;
}

.dropdown-content a{
    color:black;
    padding:24px 16px;
    text-decoration:none;
    display:block;
}
.dropdown-content-2 a{
    color:black;
    padding:24px 16px;
    text-decoration:none;
    display:block;
}

.dropdown-content a:hover{background-color:#ddd;}
.dropdown-content-2 a:hover{background-color:#ddd;}

.dropdown:hover .dropdown-content{display:block;}
.dropdown-2:hover .dropdown-content-2{display:block;}

.size{width:60px; height:40px;}

.dropdown-2 p{display: inline-block;}

a{color:white;}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

<button class="openbtn" onclick="openNav()">&#9776; Symboles pour SITAC</button>
<div id="mySidebar" class="sidebar">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="dropdown">Sectorisation
    <div class="dropdown-content">
      <div class="dropdown-2"><p>Secteurs</p>
        <div class="dropdown-content-2">
          <p>Chef de Groupe</p><br>
          <p>Chef de colonne</p><br>
          <p>Chef de Site</p>
        </div>
      </div>
      <div class="dropdown-2"><p>Sectorisation Fonctionelle</p>
        <div class="dropdown-content-2">
          <p>Alimentation, eau</p><br>
          <p>divers</p><br>
          <p>Incendie</p><br>
          <p>SAP</p><br>
          <p>Spécialisé</p>
        </div>
      </div>
      <div class="dropdown-2"><p>Sectorisation Géographique</p>
        <div class="dropdown-content-2">
         <p>Limite Secteur Géographique</p>
        </div>
      </div>
    </div>
  </div>
</div>
<script> //script to open the sidepanel
    function openNav(){document.getElementById("mySidebar").style.width = "250px";}
    function closeNav(){document.getElementById("mySidebar").style.width = "0px";}
</script>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52718249

复制

相似问题

问显示在边上的下拉内容
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问显示在边上的下拉内容EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问显示在边上的下拉内容
EN