Javascript 如何在“我的js”下拉列表/显示内容框中的不同内容之间切换

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

HTML代码

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

JS代码

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

不管怎样，我目前在我的主页中有这个代码。您会注意到，此内容下拉列表为全浏览器宽度，并使用背景图像。下拉列表中有一个项目符号列表，右侧浮动的促销图像和一个显示更多详细信息的链接

我现在只有一个处理大量内容的代码（bannanas div），我希望能够再添加两个几乎相同的内容区域，它们的显示取决于单击哪个按钮

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

任何帮助都将不胜感激。我在某种程度上理解，我可以用简单的一个单词的内容来实现这一点，但我还没有发现使用我目前正在使用的JS代码来实现更复杂的内容下拉列表

顺便说一句，到目前为止，我还没有找到一种方法来使用我当前的代码隐藏上述内容。当然，这方面的任何建议都会很好

---

提前感谢。

您的JSFIDLE无法工作，因为加载DOM元素时该函数不可用。我已经创建了一个修复该问题的程序（将函数定义移动到），并包含了在两个类似列表（bananas1和bananas1）之间切换的代码

下面是如何进行切换，第一次显示香蕉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";
    }
}

---

您不应该在js中使用

onclick=“function（）”

，因为：

如果脚本加载速度比内容快，则会失败

杂乱无章，难以组织

理由，理由，理由，太多了，你可以用谷歌搜索

我更改的是删除了

onclick

属性并使用了事件侦听器，因此脚本可以在任何地方工作。如果下拉列表的高度匹配，则使用逻辑on切换下拉列表。（如果可以使用类进行比较，则更好）

此外，您在这一行上有一个错误，因此更正如下：

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

要添加更多下拉列表，请执行以下操作： 添加一个下拉按钮，然后立即添加下拉列表。以下是最小模板：

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

下拉按钮
所容纳之物

对id属性没有要求

---

请随时询问解释

等等，如果小提琴不起作用，其他任何人都无法理解问题。如果你想让人们更快地帮助你，试着让它发挥作用，这样更多的人会对你的问题感兴趣。我还是一个新手，很难理解为什么它不能在短时间内发挥作用。如果有帮助的话，我可以试着上传一个截图？如果没有，还是谢谢你。如果你使用jquery，为什么不把它实现到

document.getElementById（“香蕉”）

？以及

s.style.height=“290px”

。有什么原因吗？我刚刚更新了OPs JSFIDLE，否则我会使用jQuery方法来更新它们！啊!！叫我懒！：P只是说，OP从未要求jquery回答这似乎几乎可以完美地完成工作。我想知道我是如何在点击另一个按钮/链接时放下“bananas1”内容的？在此版本中，仅在再次单击同一链接时显示bananas1。想象一下有一个香蕉按钮和一个香蕉2按钮。谢谢你的帮助，这已经让我对它有了更好的理解！要在单击其他按钮时执行此操作，请创建一个新函数

show_content_bananas1

，并将其中的代码移动到函数中。此外，如果需要，请确保隐藏任何其他已可见的div（香蕉）（如使用

s.style.height=“0px”

）。感谢您的回复，我将在上午对此进行调查。使用另一种方法将每个下拉列表内容稍微放在另一个下拉列表内容的下方，就好像它们在隐藏时占据了高度一样。无论如何，再次谢谢你。我会回答我早上的工作情况。我已经看过了，它工作得更好，因为它在删除新内容之前隐藏了其他可见的内容。然而，它也产生了类似的问题。如果你查一查的话，我已经试着说得更清楚了。3个圆圈将用作显示/隐藏内容的按钮。只有三个。因此，请记住圆圈的位置，我需要内容从每个下拉列表中完全相同的位置下拉（它们当前略低于前一个）。我要仔细看看，看看能不能弄明白。谢谢你解决了这个问题

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>