Question

我创建了简单的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>

但是，是否有解决方案只在主页上打开下拉列表，并在所有其他页面上默认关闭？

Answer 1

所以你可以通过添加css类来实现：

.is-hidden {
    display: none;
}

然后在JavaScript中，您可以基于加载的页面：

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

Answer 2

如果你使用单独的html文件，你可以删除javascript吗？

但是我猜测，虽然没有指定，你可以在其他页面中包含下拉文件，你可以使用带有location.pathname的javascript函数来检查文件名是什么，然后只运行它< / p>

这是你的onclick。

onclick="foo()"

这是在脚本区域或脚本文件中位于顶部的功能。

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

像这样的东西。

Answer 3

您可以为您的身体标记提供一类“主页”，然后添加以下CSS。

body.home .dropdown{display:block;}

这应该可以解决问题。

Answer 4

试试这个CSS代码。

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

Answer 5

我会像这样在身体上添加一个id和一个类：

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

仅在主页上的页面加载上打开下拉菜单

5 个答案: