1

我在左侧有一个侧面导航，可以进行不同类型的手术。它们都在 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>
4

1 回答 1

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 之前，您需要确定 div 是否“显示”。

于 2012-09-25T17:33:08.433 回答