ページローロード時にドロップダウンメニューを開いた場合

ドロップダウンメニューが1つのみのシンプルなCSSメニューを作成しました。これはホームページ上のページロードでのみ開く必要があり、サイトページの残りの部分ではデフォルトで閉じるようにしてください。ページローロード時にドロップダウンメニューを開いた場合

私はドロップダウンメニューをデフォルトでPAGELoadでJavascriptで開くように設定できました（クローズしたonclick）。これは完全に機能します。

<!-- MENU --> 
    <div class="divBg"> 

     <!-- BUTTON 1 --> 
     <div class="dropdown"> 
      <button class="dropbtnMain" onclick="document.getElementById('dropdown').style.display=='none' ? document.getElementById('dropdown').style.display='' : document.getElementById('dropdown').style.display ='none';">Dropdown categories</button> 

      <!-- BUTTON 1 DROPDOWN CONTENT --> 
      <div class="dropdown-content" id="dropdown"> 
       <a href=#>Dropdown link 1</a> 
       <a href=#>Dropdown link 2</a> 
       <a href=#>Dropdown link 3</a> 
      </div> 
     </div> 

     <!-- BUTTON 2 --> 
     <div class="dropdown"> 
      <button class="dropbtn">Category 2</button> 
     </div> 

     <!-- BUTTON 3 --> 
     <div class="dropdown"> 
      <button class="dropbtn">Category 3</button> 
     </div> 
    </div>

しかし、ドロップダウンがONLYホームページに開かれ、他のすべてのページにデフォルトで閉じられていするためのソリューションはありますか？

出典

2017-08-22 Roby Petric

私たちが必要だと思うがpageloadのドロップダウンメニューも開くjavascript。しかし、私はあなたがそれぞれの場合にクラスを体に割り当てるホームページであるかどうかを確認できると思います。 –

ですから、CSSクラスを追加することによってそれを行うことができます。

.is-hidden { 
    display: none; 
}

をして、JavaScriptであなたがロードされているページ上のベースができます：あなたは別々のhtmlファイルにあなたを使用している場合

if (window.location.pathname !== '/') { 
    document.querySelector('.dropdown').classList.add('is-hidden'); 
}

出典

2017-08-22 07:05:14 Stwosch

ありがとう、これは完全に動作します！ .dropdownはボタンも隠すので、.dropdown-contentクラスにのみ適用する必要があります。 :) –

javascriptを削除できますか？

しかし、あなたは、ファイル名が何であるかを確認するだけにして

それを実行するために、location.pathnameでJavaScript関数を使用することができ、あなたの他のページのドロップダウンのファイルを含めている指定されていないが、私は、推測していますあなたのonclickとしてこれ。

onclick="foo()"

スクリプト領域またはスクリプトファイルの先頭に移動する機能です。

function foo(){ 
    if(location == "http://foobar.com"){ 
     //Code to open your drop down 
    } 
}

このようなものです。

出典

2017-08-22 07:05:48 user8478480

bodyタグに 'home'というクラスを付けて、次のCSSを追加できます。

body.home .dropdown{display:block;}

これはトリックを行う必要があります。

出典

2017-08-22 07:08:40 Aslam

こんにちは、これは完全に動作するはずです：display：noneをdisplay：noneに変更します。私の場合は動作しません。 Shopwareの電子商取引プラットフォームを使用していますが、ホームページを「自宅」と認識しないという問題がありますか？ –

このCSSコードをお試しください。

#dropdown 
{ 
    display: none; 
} 
body.home #dropdown 
{ 
    display:block; 
}

私はこのような身体にidとクラスを追加することになり

出典

2017-08-22 07:12:53 bellabelle

：

<body id="home" class="home"> 
... 
</body>

をそして私は体がこのセレクタがあるかどうかを確認します：

function hasClass(ele, cls) { 
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); 
} 

if(hasClass(document.getElementById("home"), "test")){ 
    //do something 
}

出典

2017-08-22 07:14:55

ページローロード時にドロップダウンメニューを開いた場合

答えて

関連する問題