Question

所以我试图创建一个菜单元素，在页面上显示和隐藏特定的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();
                });
        });

（可以查看完整的代码here）

此代码大部分都有效，除非您已经显示某个元素（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的新手，所以任何建议/指针都非常感激。

Answer 1

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

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

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

在HTML中添加一些更改以利用data-属性，删除重复的ID并添加JS切换的arrowed类：

<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>

最后，重写optimize你的JavaScript：

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

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

使用jQuery切换非活动元素的文本

1 个答案: