Question

我是建立网页的新手，欢迎任何有关如何创建简单下拉选项卡的建议，其选项显示在按钮本身中，其选择属于一个值。

在下面的示例中，当鼠标悬停在Dropdown上时，会出现三个选项 - 链接1，链接2或链接3.如何更改＆＃34; Dropdown＆＃34;的文本？对于＆＃39;链接1＆＃39;选择link 1时，link 1值为1，link 2值为2，依此类推？

我的目标是根据下拉菜单中显示的值编写一个简单的if / else语句。例如，

    dropdownValue = document.getElementById('dropdown-menu')
    if (dropdownValue === 1) {
        console.log('yes')
    }
    else if (dropdownValue === 2) {
        console.log('no')
    }
    else {
        console.log('maybe')
    };

CSS：

.dropbtn {
    background-color: #4CAF50;
    color: white;
    display: inline-block;
    height: 38px;
    line-height: 28px;
    padding: 16px;
    font-size: 16px;
    border: 1px solid white;
    font-weight: 600;
    font-size: 16px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
    font-family: 'Open Sans', sans-serif;
    padding: 5px 5px;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

HTML：

  <div class="dropdown">
      <button class="dropbtn">Dropdown</button>
      <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
      </div>

https://jsfiddle.net/cp9cw3ph/#

Answer 1

向链接添加click事件监听器，并使用textContent或innerHTML获取链接中的内容并将其应用于按钮。

var btn = document.getElementById('dropbtn'),
		links = document.getElementById('dropdown-content').getElementsByTagName('a');

for (var i = 0; i < links.length; i++) {
	links[i].addEventListener('click',function() {
  	btn.textContent = this.textContent;
  })
}

.dropbtn {
    background-color: #4CAF50;
    color: white;
    display: inline-block;
    height: 38px;
    line-height: 28px;
    padding: 16px;
    font-size: 16px;
    border: 1px solid white;
    font-weight: 600;
    font-size: 16px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
    font-family: 'Open Sans', sans-serif;
    padding: 5px 5px;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

  <div class="dropdown">
  <button class="dropbtn" id="dropbtn">Dropdown</button>
  <div class="dropdown-content" id="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>

Answer 2

您可以尝试这个JQuery代码：

$(function(){
    $("a").click(function (e) {
        e.preventDefault();
        $(".dropbtn").html($(this).html());
        switch ($(this).attr("_value")){
            case "1":
                console.log("yes");
            break;
            case "2":
                console.log("no");
            break;
            case "3":
                console.log("maybe");
            break;
        }

    });

});

<强> HTML：

  <div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#" _value="1">Link 1</a>
    <a href="#" _value="2">Link 2</a>
    <a href="#" _value="3">Link 3</a>
  </div>

为选定的下拉标签

2 个答案: