Question

我做了一个JS小提琴。我知道我的下拉内容不在那里工作，但它在文件中看起来很好，所以我假设它只是JSFiddle中缺少的某些代码导致它无法正常工作。

HTML CODE

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

    <br>    <span class="circles"><a href="#" >&#128241;</a></span>
    <span class="circles"><a href="#">&#8505;</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 CODE

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

无论如何，我目前在我的主页上有这个代码。您会注意到此内容下拉是完整的浏览器宽度并使用背景图片。在下拉列表中是一个项目符号列表，向右浮动的促销图像和一个显示更多详细信息的链接。

我目前只有代码处理大量内容（bannanas div），并且我希望能够添加两个，几乎相同的内容区域，而不是依赖于单击哪个按钮。

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

非常感谢任何帮助。我理解，在某种程度上，我可以使用简单的单词内容来处理这个问题，但是使用我目前正在使用的JS代码，却找不到任何稍微复杂的内容下拉列表。

旁注，我还没有设法在使用我当前的代码时隐藏所述内容。当然，任何有关这方面的提示都会很棒。

提前致谢。

Answer 1

你的JSFiddle不起作用，因为在加载DOM元素时该函数不可用。我创建了JSFiddle修复问题（将函数定义移到jquery ready），还包括在两个相似列表（香蕉和香蕉1）之间切换的代码。

下面是如何完成切换，第一次显示香蕉div，从第二次香蕉和香蕉1将会显示

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()"，因为：

如果脚本加载的速度比内容快，则会失败
不整洁，更难组织
原因，原因，原因，说得太多，你可以谷歌吧。

http://jsfiddle.net/xzgv6va3/

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

此外，你在这一行有一个错误，所以这是更正：

<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下拉/ showcontent框中的不同内容之间切换

2 个答案:

修复：

添加更多下拉列表：