Question

我不知道为什么我的JS函数不会触发。切换功能有效，但showme功能无效。没有控制台错误，所以我不确定如何调试。

尝试将其分为两部分：1）单击字段并显示菜单2）单击菜单并显示切换按钮

完整的代码在这里： https://jsfiddle.net/ericaheinz/cjhxzmn6/4/

这是我的js函数：

    function showme() {
      alert("Woo!");
      var y = document.getElementById("why1");
      y.style.display = "none";
      var z = document.getElementById("love1");
      z.value = "Title 1";
    } 

    function toggle(button) {
      button.classList.toggle("is-on");
    }

Answer 1

我看到一个控制台错误，提示未定义“ showme”（也未定义切换）。我认为这是因为javascript将被添加到HTML下方的页面。

如果将其添加到HTML上方的jfiddle中的HTML窗口中，它将可以正常工作：

<script>
function showme() {
    alert("Woo!");
    var y = document.getElementById("why1");
    y.style.display = "none";
    var z = document.getElementById("love1");
    z.value = "Title 1";
}
</script>

编辑：问题在于，仅当焦点位于输入上时才显示按钮，因此，当您尝试单击按钮时，它们将被隐藏。

有点黑，但是您可以添加：

.multipart__menu:hover {
    display: block;
}

这将确保您单击按钮后按钮不会消失。

Answer 2

根据评论，您需要避免内联js。无论如何，您都有一个输入文本框 love1 。这就是问题。尝试为此元素添加show__multipart__menu单击处理程序：

function show__multipart__menu() {
    document.getElementById('titles1').style.display = 'block';
    document.getElementById("why1").style.display = 'none';
}
function showme(ele) {
    document.getElementById('titles1').style.display = 'none';
    var y = document.getElementById("why1");
    y.style.display = "block";
    var z = document.getElementById("love1");
    z.value = ele.textContent;
}

function toggle(button) {
    button.classList.toggle("is-on");
}

input[type='text'] {
    border: 2px solid #EB2B5E;
    background: #FFF url() no-repeat 5px 5px;
    display: block;
    width: 480px;
    margin: 16px auto;
    font-size: 18px;
    padding: 10px 10px 10px 42px;
}
.multipart {
    position: relative;
}
.multipart__menu {
    display: none;
    position: absolute;
    width: 480px;
    border: 1px solid #DDD;
    border-bottom: 0;
    border-top: 0;
    z-index: 99;
    top: 45px;
    left: 80px;
    box-shadow: 0 2px 2px rgba(0,0,0,0.26);
}
.multipart input:focus + .multipart__menu {
    display: block;
}
.multipart__menu button {
    display: block;
    width: 100%;
    font-size: 16px;
    cursor: pointer;
    padding: 10px 10px 10px 46px;
    text-align: left;
    background-color: #fff;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid #eeeeee;
}
.multipart__menu button:hover {
    background-color: #FEF4F7;
    cursor: pointer;
}
.multipart__why {
    display: none;
}
.multipart__why.is-visible {
    display: block;
}
/* BUTTONS */
.toggle {
    display: inline-block;
    margin: 0 1px 8px 0;
    padding: 0px 10px;
    background: white;
    color: #222;
    border: 1px solid #00B7FF;
    border-radius: 13px;
    height: 24px;
    line-height: 22px;
    font-size: 14px;
    transition: all .1s ease-in-out;
}
.toggle:hover {
    cursor: pointer;
    color: #00B7FF;
}
.toggle.is-on {
    background: #00B7FF;
    color: white;
}

<div class="multipart">
    <input onclick="show__multipart__menu()" type="text" class="love" id="love1">
    <div class="multipart__menu" id="titles1" >
        <button onclick="showme(this)">Title 1</button>
        <button onclick="showme(this)">Title 2</button>
    </div>
    <div class="multipart__why" id="why1">
        <h4>Why?</h4>
        <button class="toggle" onclick="toggle(this)">Option A</button>
        <button class="toggle" onclick="toggle(this)">Option B</button>
        <button class="toggle" onclick="toggle(this)">Option C</button>
        <button class="toggle" onclick="toggle(this)">Option D</button>
        <button class="toggle" onclick="toggle(this)">Option E</button>
        <button class="toggle" onclick="toggle(this)">Option F</button>
    </div>
</div>

Answer 3

HTML结构有问题，尽管我不确定如何。该按钮没有单击事件。将它们移到div之外，然后奏效。

        <div class="multipart">

          <input type="text" class="love" id="love1">
          <button onclick="showme()">Title 1</button>
          <button>Title 2</button>

https://jsfiddle.net/6bk28fyn/

启动第二个JS函数

3 个答案: