如何在我的 js dropdown/showcontent 框上的不同内容之间切换

Question

我做了一个 JS Fiddle。我知道我的下拉内容在那里不起作用，但它在文件上看起来很好，所以我假设它只是 JSFiddle 中缺少一些代码导致它不起作用。

HTML 代码

   <div id="links"> <span class="circles"><a href="#!" id="wilfconnect" onclick="show_content()">🔗</a></span>

    <br>    <span class="circles"><a href="#" >📱</a></span>
    <span class="circles"><a href="#">ℹ</a></span>
    <a id="drop" onclick="show_content()"><img src="images/drop.png" alt="drop" style="width:345px;height:290px"/></a>

      <!-- everything in the bananas div drops beneath the 'drop' image upon click -->

    <div id="bananas">
        <div class="dropcontent">
            <ul class="dropcontent">
                <li>bananas bananas bananas bananas</li>
                <li>bananas bananas bananas bananas</li>
                <li>bananas bananas bananas bananasbananas.</li>
                <li>bananas bananas bananas bananas</li>
                <li>bananas bananas bananas bananas</li>
            </ul>
            <img class="promo" src="promo.png" alt="Promotion" style="width:30%;height:auto"></img>
            <br>    <span class="talk" a href="how.html">FOR MORE DETAILS CLICK HERE</span>
                <!-- I want to be able to have the dropdown appear with different content if one of the other buttons is clicked i.e. a similar div called 'apples' and one called 'oranges' -->

        </div>
    </div>

CSS 代码

 #links {
    display: block;
    padding: 0;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    background-color: #E04E39;
}
#links .circles {
    display: inline-block;
    position: relative;
    height: 75px;
    width: 60px;
    line-height: 70px;
    bottom: 10px;
    margin: 0;
    margin-top: 5px;
    margin-left: 30px;
    margin-right: 30px;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    font-family:"entypo";
    font-size: 40pt;
    text-align: center;
    color: #E04E39;
    border-radius: 150px;
    background: #eee;
    overflow: hidden;
    cursor: pointer;
    z-index: 700;
}
/* I don't need the background image or css styling changing, I merely need the content changing such as the list items and the promo image */
#bananas {
    position: relative;
    transition: height 0.6s ease-out 0s;
    overflow: hidden;
    width: 100%;
    height: 0em;
    background-image: url("hidden_bg.jpg");
    background-repeat: repeat-x;
    padding: 0;
    padding-left: auto;
    padding-right: auto;
    margin: 0;
    margin-bottom: 20px;
    color: #ffffff;
}
ul.dropcontent {
    float: left;
    font-family:"Thonburi";
    font-size: 12pt;
    font-weight: 200;
    color: #ffffff;
    margin-: 20px;
    padding: 200px auto;
    text-align: left;
    height: 100%;
    width: 50%;
}
li.dropcontent {
    color: #ffffff;
}
.dropcontent {
    width: 60%;
    float: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    height: 100%;
    overflow: hidden;
}
.promo {
    display: inline-block;
    float: right;
    vertical-align: middle;
    margin: auto;
}
img.promo {
    display: block;
    float: right;
    line-height: 20px;
    vertical-align: middle;
    margin-top: 2%;
    margin-bottom: 8%;
    top: 5%;
    padding: 0;
}
.talk {
    position: absolute;
    left: 62%;
    bottom: 10%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    background-color: #E04E39;
    padding: 7px 7px;
    color: #ffffff;
    border-radius: 4px 4px 4px 4px;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

JS 代码

    function show_content() {
    var s = document.getElementById("bananas");
    s.style.height = "290px";
}

无论如何，我目前在我的主页中使用了这段代码。您会注意到此下拉内容是全浏览器宽度并使用了背景图像。在下拉列表中是项目符号列表，宣传图片漂浮在右侧，link 显示更多详细信息。

我目前只有处理大量内容的代码 (bannanas div)，我希望能够再添加两个几乎完全相同的内容区域，它们的出现取决于单击哪个按钮。

目前只有一个活动按钮（大图）。单击它会显示下面的内容，但我希望它显示与单击的 link 相关的内容。

如有任何帮助，我们将不胜感激。我在某种程度上理解我可以使用简单的一个单词内容来完成这项工作，但是使用我目前正在使用的 JS 代码还没有找到任何稍微复杂的内容下拉列表。

旁注，到目前为止，我还没有找到一种方法来使用我当前的代码隐藏上述内容。当然，关于这方面的任何提示也很棒。

提前致谢。

Answer 1

您的 JSFiddle 无法正常工作，因为当 DOM 元素已加载时该功能不可用。我创建了一个 JSFiddle fixing that issue (moved function definition to jquery ready) 并且还包含了在两个相似列表（bananas 和 bananas1）之间切换的代码。

下面是切换的方法，第一次显示bananasdiv，第二次显示bananas和bananas1交替显示

show_content = function () {
    var s = document.getElementById("bananas");
    var s1 = document.getElementById("bananas1");

    if (s.style.height != "290px") {
        s.style.height = "290px";
        s1.style.height = "0px";
    } else {
        s.style.height = "0px";
        s1.style.height = "290px";
    }
}

Answer 2

你不应该在js中使用onclick="function()"，因为：

如果脚本加载速度快于内容，它将失败
凌乱且难以整理
理由，理由，理由，说的太多了，你可以google啦。

http://jsfiddle.net/xzgv6va3/

我更改的是删除 onclick 属性并使用事件侦听器，因此该脚本可以在任何地方运行。如果下拉列表的高度匹配，则使用逻辑切换下拉列表。（如果可以使用 class 进行比较会更好）

此外，您在此行中有错误，因此更正如下：

<span class="talk" href="">FOR MORE DETAILS CLICK HERE</span>

(多了一个a)

修复：

function showContent() {
    if (this.nextElementSibling.className == "dropdown") {
        var s = this.nextElementSibling;
        if (s.style.height == "290px") {
            s.style.height = "0px"
        } else {
            for(var i=0;i<dropdowns.length;i++){
                dropdowns[i].style.height = "0px"
            }
            s.style.height = "290px"
        }
    } else {
      return false  
    }
}
var classname = document.getElementsByClassName("dropdown-btn");
var dropdowns = document.getElementsByClassName("dropdown");

for(var i=0;i<classname.length;i++){
    classname[i].addEventListener('click', showContent, false);
}

要添加更多下拉菜单：

添加一个下拉按钮和紧随其后的下拉菜单。这是最小模板：

<a class="dropdown-btn">Dropdown Button</a>
<div class="dropdown">
    Content
</div>

id属性没有要求

有求必应

如何在我的 js dropdown/showcontent 框上的不同内容之间切换

How to switch between different content on my js dropdown/showcontent box

html

javascript

css

修复：

要添加更多下拉菜单：