Question

我已经搜索了高低的答案，我无法得到任何工作。我的左侧有侧导航，有不同类型的手术。他们都是ul。

当您点击手术（ul li）时，右侧会出现一个div，显示该特定手术的常见问题解答。单击ul中的另一个链接将隐藏当前打开的div并显示您刚刚单击的那个。

我设法做到了这一点，但是当我再次点击相同的ul li链接时，我还希望切换FAQ div的可见性。任何帮助赞赏！这是我的第一次发帖，如果我没有正确地粘贴代码，那么我就没事了......

<html>
<head>
<style>
#popup div { display:none; }
#popup div.show { display:block; }
ul#links li { cursor:pointer;}
</style>
</head>
<body>

    <div class="sidenav">
        <ul id="links">
            <li id="armlift">Arm Lift</li>
            <li id="liposuction">Liposuction</li>
            <li id="tummytuck">Tummy Tuck</li>
            <li id="postgastric">Post-Gastric Bypass Surgery</li>
        </ul>       
    </div>

    <div id="popup">
        <div id="a_armlift">
        <span class="faq_header">Arm Lift</span>
        <p class="treatment_question">What is a an Arm Lift?</p>
            <div class="treatment_answer">This surgery removes excess...</div>
        <p class="treatment_question">What should I know?</p>
            <div class="treatment_answer">An incision is made...</div>
    </div>  
        <div id="a_liposuction">
        <span class="faq_header">Liposuction Lift</span>
        <p class="treatment_question">What is a Liposuction?</p>
            <div class="treatment_answer">Liposuction is the removal...</div>
        <p class="treatment_question">What should I know?</p>
            <div class="treatment_answer">Ideal candidates for...</div>
    </div>
        <div id="a_tummytuck">
        <span class="faq_header">Tummy Tuck</span>
        <p class="treatment_question">What is a Tummy Tuck?</p>
            <div class="treatment_answer">A tummy tuck tightens...</div>
        <p class="treatment_question">What is a Mini Tummy Tuck?</p>
            <div class="treatment_answer">A mini-tuck is a...</div>
        </div>
        <div id="a_postgastric">
        <span class="faq_header">Post-Gastric Bypass Surgery</span>
        <p class="treatment_question">What is a Post-Gastric Bypass Surgery?</p>
            <div class="treatment_answer">Gastric bypass surgery removes...</div>
        <p class="treatment_question">What should I know?</p>
            <div class="treatment_answer">Each patient has...</div>
    </div>
</div>

<script type="text/javascript">
var links_ul = document.getElementById('links');

for (var i = 0; i < links_ul.children.length; i++) {
    links_ul.children[i].onclick = function(ev) {
        s = document.getElementById('a_' + this.id);
        popup = document.getElementsByClassName('show');
        for (var j = 0; j < popup.length; j++) {
            popup[j].className = '';
        }
        s.className = 'show';
    };
}
</script>

</body>
</html>

Answer 1

我建议不要这样做。有很多插件可以做这种事情。

但是，这是您问题的答案：http://jsfiddle.net/6Vku8/1/

for (var i = 0; i < links_ul.children.length; i++) {
    links_ul.children[i].onclick = function(ev) {
        s = document.getElementById('a_' + this.id);
        popup = document.getElementsByClassName('show');
        var shown = s.className == 'show';

        for (var j = 0; j < popup.length; j++) {
            popup[j].className = '';
        }
        s.className = shown ? '' : 'show';
    };
}

您需要了解div是否显示＆＃34;＆＃34;在隐藏所有div之前。

在隐藏其他div时切换div

1 个答案: