Question

所以我查看了其他问题，并在此链接中找到了答案：

Toggle (show/hide) element with javascript

以下是改变显示的答案中的以下功能。

function toggle(id) {
var element = document.getElementById(id);

  if (element) {
    var display = element.style.display;

    if (display == "none") {
        element.style.display = "block";
    } else {
        element.style.display = "none";
    }
  }
}

我在我的代码中尝试过，但它无法正常工作。我在最后或这篇文章中附上了JSFiddle的链接。

我的父母 div 包含＃strongities的 id 。它包含多个子项，但重要的是 li ， p 和 div ，其ID为#suggestion_input。以下是HTML。

HTML

<div id="activities" class="info_container">
        <h1>Our Activities</h1>
        <div class="contain">
            <ul>  
                <li>Activity 1</li>
                <li>Activity 2</li>
                <li>Activity 3 </li>
                <li>Activity 4 </li>
                <li>Activity 5</li>
                <li>Activity 6 </li>
                <li>Activity 7</li>
                <li>Your Suggestions</li>
            </ul>
            <p> 
                Bacon ipsum dolor sit amet ribeye tenderloin meatball, chuck andouille beef ribs jerky ...
            </p>
            <div id="suggestion_input">
                <label for="name" >Your Name</label>
                <input type="text" id="name" name="name">
                <label for="email">Email</label>
                <input type="email" id="email" name="email">
                <label for="suggestions">Suggestions</label>
                <textarea id="suggestions" name="suggestions" rows="39"></textarea>
            </div>

当用户点击名为＆＃34;您的建议＆＃34;的ul中的最后一个 li 时， p 将显示设置为无，并且＃ suggestion_input将显示内联块。目前，他们的css分别设置为inline-block和none。

CSS

 #activities p{
 display:inline-block;
 width:500px;
 vertical-align:top;
 margin-top:20px;
 margin-left:20px;
 background:#FFFDA1;
 }

 #suggestion_input{
 display:none;
 margin-left:150px;
 vertical-align:top;
 margin-top:20px;
 text-align:center;
  }

然后这是我的javascript，我认为它反映了链接中的答案，除了它不是一个功能。

Javascript - 此代码是addEventListener的一部分。事件是＆＃34;点击＆＃34;。

 if(e.target.innerText === 'Your Suggestions'){

            var para = document.getElementById('activities').querySelector('p');
            var display = para.style.display;
            /* if you uncomment this, then the following code will work
            outside of the if display == 'inline-block' condition

            para.style.display = 'none';
            suggestion_input.style.display = 'inline-block';

            */

            if(display == 'inline-block'){
                // This code will not work
                para.style.display = 'none';
                suggestion_input.style.display = 'inline-block';
                console.log('works');
            }
        }else{
            if(display == 'none'){
                display = "inline-block";
            }
        }
    }

当我点击时，没有任何反应。错误是因为＆＃34; display ==＆＃39; none＆＃39;＆＃34;的if语句中的条件。？

这是JSfiddle：http://jsfiddle.net/a4t7w/1/

Answer 1

你的js中有几个错误，我在评论中列出了它们，4个在totoal中

document.getElementById('activities').addEventListener("click",function(e){

    // SKIP THIS CODE, THE ERROR LIES BELOW

        // 1. put the var outside of the if/else 
        var para = document.getElementById('activities').querySelector('p');
        var display = para.style.display;

        // THIS WAS WHERE THE ERROR OCCURS           
        if(e.target.innerText === 'Your Suggestions'){

            if(display = 'inline-block'){   // 2. it should be "=" instead of "=="
                para.style.display = 'none';
                suggestion_input.style.display = 'inline-block';
                console.log('works');
            }
        }else{
            if(display = 'none'){
                suggestion_input.style.display = 'none';    // 3. add in suggestion display none
                para.style.display = 'inline-block';    // 4. "para.style.display" instead of "display"
            }
        }
    } 
});

工作演示：http://jsfiddle.net/a4t7w/7/

所以现在当你点击建议时，从显示起来，比你点击活动，段落回来，从消失

Answer 2

仔细阅读本行：

/* 
if you uncomment this, then the following code will work
 outside of the if display == 'inline-block' condition

para.style.display = 'none';
suggestion_input.style.display = 'inline-block';

*/

现在你所要做的就是取消注释这一行：

para.style.display = 'none';
suggestion_input.style.display = 'inline-block';

Answer 3

好的，首先，您的部分问题在于您的样式表中设置了para.style.display等于inline-block之类的理解。不幸的是，在这种用法中，Javascript正在访问您使用元素本身定义的内联样式，以及不您使用外部CSS定义的内容。

所以这句话：if(display == 'inline-block')永远不会返回true因为display实际设置为""。如果您还没有，请熟悉Firebug for Firefox。它有助于调试这类东西。

另一件事是：if(e.target.innerText === 'Your Suggestions')。您应该使用innerText或innerHTML而不是textContent。 innerText属性是IE的东西。

现在，解决您的问题！我看到您将点击事件附加到包含<div>元素的<ul>元素。如果您只需要这个点击活动，那么您可以使用＆＃34;建议＆＃34; <li>然后我建议您在连接监听器时隔离该特定元素。

更改您的HTML和JS：

<li id="suggestionToggle">Your Suggestions</li>
...
document.getElementById('suggestionToggle').addEventListener("click",function(e) ...

接下来，您可以在""元素上设置样式时重写Javascript以测试inline-block或<p>的存在。这是您的代码的更新版本：

document.getElementById('activities').addEventListener("click",function(e)
{
    var suggestion_input = document.getElementById('suggestion_input');
    var para = document.getElementById('activities').querySelector('p');
    var light_green = document.getElementById('activities').querySelector('.light_green');      


if(light_green){
    light_green.style.backgroundColor="red";
    light_green.className = "";
    e.target.style.backgroundColor = '#0DFFB9';
    e.target.className = 'light_green';
} else {
    e.target.style.backgroundColor = '#0DFFB9';
    e.target.className = 'light_green';
}

if(e.target.innerHTML == 'Your Suggestions') {       
    var display = para.style.display;           

    if(display == 'inline-block' || display == "") {
        // This code will not work ** It will now! **
        para.style.display = 'none';
        suggestion_input.style.display = 'inline-block';
    } else {
        if(display != "inline-block") {
            para.style.display = "inline-block";
            suggestion_input.style.display = "none";
        }
    }
} else {        
    para.style.display = "inline-block";
    suggestion_input.style.display = "none";
}

}）;

JS小提琴看到切换操作在这里：http://jsfiddle.net/RyUz5/8/

希望有所帮助！

编辑：启用正确的切换，我不小心被yancie注意到了。

使用javascript更改显示

3 个答案: