0

所以我试图创建一个菜单元素，在页面上显示和隐藏特定的 div，同时还更改菜单的文本。经过一番搜索，我大部分都解决了（尽管我知道代码有点笨拙）：

$(document).ready(function(){
            $('.section[id="option1"]').click(function(){
                    $(this).text($(this).text() == 'OPTION1' ? 'OPTION1 >>' : 'OPTION1');
                    $('.blurb').not('.blurb[id="option1"]').hide();
                    $('.blurb[id="option1"]').slideToggle();
                });
            $('.section[id="option2"]').click(function(){
                    $(this).text($(this).text() == 'OPTION2' ? 'OPTION2 >>' : 'OPTION2');
                    $('.blurb').not('.blurb[id="option2"]').hide();
                    $('.blurb[id="option2"]').slideToggle();
                });
            $('.section[id="option3"]').click(function(){
                    $(this).text($(this).text() == 'OPTION3' ? 'OPTION3 >>' : 'OPTION3');
                    $('.blurb').not('.blurb[id="option3"]').hide();
                    $('.blurb[id="option3"]').slideToggle();
                });
            $('.section[id="option4"]').click(function(){
                    $(this).text($(this).text() == 'OPTION4' ? 'OPTION4 >>' : 'OPTION4');
                    $('.blurb').not('.blurb[id="option4"]').hide();
                    $('.blurb[id="option4"]').slideToggle();
                });
            $('.section[id="option5"]').click(function(){
                    $(this).text($(this).text() == 'OPTION5' ? 'OPTION5 >>' : 'OPTION5');
                    $('.blurb').not('.blurb[id="option5"]').hide();
                    $('.blurb[id="option5"]').slideToggle();
                });
            $('.section[id="option6"]').click(function(){
                    $(this).text($(this).text() == 'OPTION6' ? 'OPTION6 >>' : 'OPTION6');
                    $('.blurb').not('.blurb[id="option6"]').hide();
                    $('.blurb[id="option6"]').slideToggle();
                });
        });

（可以在这里查看完整的代码）

此代码在大多数情况下都有效，除了如果您已经显示了某个元素 (class="blurb")，当您单击另一个元素的菜单项 (class="section") 时，菜单会指示另一个元素元素仍处于打开状态。似乎必须有一种简单的方法可以在单击时附加或删除所需的文本，但我似乎找不到一个好的方法。是否值得使用类似expander.js的东西重写代码？

这是受影响的html

<div class="nav">
    <div class="section" id="option1">option1</div>
    <div class="section" id="option2">option2</div>
    <div class="section" id="option3">option3</div>
    <div class="section" id="option4">option4</div>
    <div class="section" id="option5">option5</div>
    <div class="section" id="option6">option6</div>
 </div>

        <div class="blurb hidden" id="option1">
        <h1>content for option1</h1>
    </div>
    <div class="blurb hidden" id="option2">
        <h1>content for option2</h1>
    </div>
    <div class="blurb hidden" id="option3">
        <h1>content for option3</h1>
    </div>
    <div class="blurb hidden" id="option4">
        <h1>content for option4</h1>
    </div>
    <div class="blurb hidden" id="option5">
        <h1>content for option5</h1>
    </div>
    <div class="blurb hidden" id="option6">
        <h1>content for option6</h1>
    </div>

我对 jQuery 还很陌生，因此非常感谢任何建议/指针。

4

1 回答 1

0

:after我使用自定义类和CSS 样式解决了您的问题：http: //jsfiddle.net/mblase75/sDrZ2/3/

首先，一些CSS来附加箭头并转换为大写而不直接修改文本：

.uppercase {
    text-transform: uppercase;
}
.uppercase.arrowed:after { 
    content: " >>";
}

添加对 HTML 的一些更改以利用data-属性，删除重复的 ID 并添加一个arrowedJS 切换的类：

<div class="nav">
    <div class="section arrowed" data-blurb="option1">option1</div>
    <div class="section arrowed" data-blurb="option2">option2</div>
    <div class="section arrowed" data-blurb="option3">option3</div>
    <div class="section arrowed" data-blurb="option4">option4</div>
    <div class="section arrowed" data-blurb="option5">option5</div>
    <div class="section arrowed" data-blurb="option6">option6</div>
</div>

最后，重写以优化您的 JavaScript：

 $('.section').click(function () {
     $(this).addClass('uppercase').toggleClass('arrowed')
         .siblings('.section').removeClass('arrowed');
     $('#'+$(this).data('blurb')).slideToggle()
         .siblings('.blurb').hide();
 });

请注意，arrowed该类已切换，因此需要最初添加它，以便在第一次单击时将其关闭。

于 2013-02-18T16:08:29.713 回答