メニューを上から下に押してください。

私は、クリックするとページをプッシュして特定のサブメニューを表示するメニューを作ろうとしています。

メニューの高さは50pxです。高さを使用している場合、コンテンツはプッシュダウンされません。

最初のリンクをクリックすると、そのリンクのサブメニューが表示されます。 2番目のリンクを押すと、最初のサブメニューを2番目のサブメニューリンクのセットに置き換える必要があります。

今はすべてがうんざりしていて、うまく動作しません。私はjavascriptについて多くのことを知っています。あなたがここで見ることができます：

jQuery(document).ready(function(){ 
    jQuery(".menu-item-has-children").click(function(){ 
     jQuery(this).children(".sub-menu").slideToggle(); 
    }); 
});

ありがとうございます。

https://jsfiddle.net/tjkr6L08/

出典

2017-02-22 Kal-El

だからあなたの問題は、50％のjavascript、50％CSSでJavascriptを

jQuery(document).ready(function() { 
    jQuery(".menu-item-has-children").click(function() { 

    jQuery(".opened").slideUp().removeClass("opened"); 
    jQuery(this).children(".sub-menu").slideToggle().addClass("opened"); 

    }); 
});

CSS

.sub-menu { 
    display: none; 
    position:absolute; 
    top:40px; 
    left:0; 
    right:0; 
}

https://jsfiddle.net/tjkr6L08/1/

を見てみましょう。あなたが望むものは、以前に開いたサブメニューへの参照を作ることです、それであなたはそれを閉じることができます。物事を適切に整列させるには、メニューを絶対にすることができます。

これは最速の解決策です。これは最善ではないかもしれませんが、どのように進めるかを考えさせます。

出典

2017-02-22 15:17:42 nbo

のマニュアルを参照してくださいJavaスクリプトで代わりにトグルのブートストラップ崩壊クラスを使用することができます今。 –

あなたは一度、あなたの迅速な応答をありがとうございましたが、私はもっと混乱しそうだブートストラップCollapse

.menu-menu-top-container { 
 
    width: 100%; 
 
    text-align: center; 
 
    position: static; 
 
    height: 50px; 
 
} 
 

 
.menu-top li { 
 
    display: inline-block; 
 
    padding:5px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="menu-top"> 
 
    <div class="menu-menu-top-container"> 
 
    <ul id="menu-menu-top" class="menu"> 
 
     <li><a href="#" data-toggle="collapse" data-target="#Companie">Companie</a> 
 
     <li><a href="#" data-toggle="collapse" data-target="#Cariere"> Cariere</a> 
 
     <li id="menu-item-457" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-457"><a href="contact/index.html">Contact</a></li> 
 
\t </ul> 
 

 
    <div id="Companie" class="collapse"> 
 
     <ul class="sub-menu"> 
 
      <li id="menu-item-450" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-450"><a href="companie/echipa-copy/index.html">Echipa</a></li> 
 
      <li id="menu-item-451" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-451"><a href="companie/echipa/index.html">Echipa</a></li> 
 
      <li id="menu-item-452" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-452"><a href="companie/implicare-sociala/index.html">Implicare socială</a></li> 
 
      <li id="menu-item-453" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-453"><a href="companie/misiune-valori/index.html">Misiune și Valori</a></li> 
 
      <li id="menu-item-454" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-454"><a href="companie/calitate-si-certificari/index.html">Calitate și certificări</a></li> 
 
      <li id="menu-item-455" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-455"><a href="companie/despre-noi/index.html">Despre noi?</a></li> 
 
     </ul> 
 
    </div> 
 
    <div id="Cariere" class="collapse"> 
 
    <ul class="sub-menu"> 
 
      <li id="menu-item-450" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-450"><a href="companie/echipa-copy/index.html">Echipa Copy</a></li> 
 
      <li id="menu-item-451" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-451"><a href="companie/echipa/index.html">Echipa</a></li> 
 
      <li id="menu-item-452" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-452"><a href="companie/implicare-sociala/index.html">Implicare socială</a></li> 
 
      <li id="menu-item-453" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-453"><a href="companie/misiune-valori/index.html">Misiune și Valori</a></li> 
 
      <li id="menu-item-454" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-454"><a href="companie/calitate-si-certificari/index.html">Calitate și certificări</a></li> 
 
      <li id="menu-item-455" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-455"><a href="companie/despre-noi/index.html">Despre noi?</a></li> 
 
     </ul> 
 
    </div> 
 
</div> 
 
</div> 
 

 
</body> 
 
</html>

出典

2017-02-22 15:30:22

高さを取り除くと、50pxはメニューをうまく押し込めます。そして、メニューからもう一度リンクを押すか、別のリンクをクリックしてサブメニューに切り替えると、どのようにサブメニューを閉じることができますか？ –

ブートストラップなしでこれを行う方法はありますか？それは簡単なコードのように見え、私はそれの底に到達することができません。 –

メニューを上から下に押してください。

答えて

関連する問題