Question

我为同一页面中的多个链接创建了一个多重切换。它们都是关闭的（加号），点击它们时每个都会打开一个div（并显示一个减号）。

我可以让切换工作，但我坚持加号和减号。当一个链接打开时，所有链接都将显示减号。

每个a都有一个ID为1到15的ID。

我们如何只打开一个显示减号，其他所有显示加号？

请咨询

此处使用的代码为：

$('.questions a').removeClass('DownArrow');
$('.questions a').addClass('RightArrow');  

function toggleDiv(divId) {
    $("#"+divId).toggle();
    $('.questions a').toggleClass('DownArrow');
    $('.questions a').toggleClass('RightArrow');
}

HTML：

<div class='questions'> 
    <a class="DownArrow" id="numb-1" href="javascript:toggleDiv('myContent1');">text</a>
</div>
<div id="myContent1">
    <p>some text</p>
</div>
<div class='questions'> 
    <a class="DownArrow" id="numb-2" href="javascript:toggleDiv('myContent2');">text</a>
</div>
<div id="myContent2">
    <p>some text</p>
</div>

这里是CSS：

div#questions  a {  
    display:block; border:1px solid #F00; width:500px; padding:10px; 
}

div#myContent1,div#myContent2,div#myContent3,div#myContent4,div#myContent5 {
    display:none;
}

a.DownArrow {
    background:#ccc url(../images/plus.png) no-repeat 460px 8px;
}

a.RightArrow {
    background:#ccc url(../images/minus.png) no-repeat 460px 8px;
}

Answer 1

如果您使用evnet处理程序而不是内联onclick分配，这会容易得多... 你可以使用acnchors上的href来定位：

修订标记

<div class='questions'> 
  <a class="DownArrow" id="numb-1" href="#myContent1">text</a>
</div>
<div id="myContent1">
  <p>some text</p>
</div>
<div class='questions'> 
  <a class="DownArrow" id="numb-2" href="#myContent2">text</a>
</div>
<div id="myContent2">
  <p>some text</p>
</div>

<强> JS

$(function (){
   $('div.questions a').click(function (e){
        var $a = $(this),
            target = $a.attr('href');

        // toggle the classes on the a clicked
        $a.toggleClass('DownArrow RightArrow');

        $(target).toggle(); // show the DIV  
   });
});

Here is a Fiddle

Answer 2

这与你所展示的有点不同，但在这里坚持我。

如果内容像accordion/collapsing content list样式配置一样打开，那么实际上并不需要id s和诸如此类的所有内容。这就是jQuery的奇迹：它让遍历触手可及。

所以这实际上非常简单：

<div class="questions">
    <span>+</span>
    <a href="#">text</a>
</div>
<div class="content">
    <p>some text</p>
</div>
<div class='questions'> 
    <span>+</span>
    <a href="#">text</a>
</div>
<div class="content">
    <p>some text</p>
</div>

注意，我没有展示所有疯狂的id，我已经实现了content课程。在我的例子中，我也使用<span>+</span>代替切换箭头的图像，但这只是因为我认为没有必要证明这一点。如果您希望我解释一下，请告诉我。

CSS的唯一相关部分：

.content {
    display: none;
}

这里我们有（非常非常简单）jQuery：

jQuery(function load(){
    var $questions = $('.questions'),
        $content = $('.content');

    $questions.on('click', function toggle(){
        var $this = $(this),
            $selected = $this.next('.content');

        $content.not($selected).hide();

        $selected.show();

        $questions.not(this).find('span').text('+');
        $this.find('span').text('-');

        return false;
    });
});

http://jsfiddle.net/userdude/5t2Un/

所以我所做的就是......

// jQuery(); is a shortcut to $(document).ready()
jQuery(function load(){
    // I'm going to cache my elements for later.
    // I can also use $() inside this function.
    var $questions = $('.questions'),
        $content = $('.content');

    // Here I'm going to detect a click on a `div.questions`,
    // and use this as my toggle.
    $questions.on('click', function toggle(){
        var $this = $(this),
            // Notice I'm using `$.next('.content'). This is
            // how I select the appropriate `.content` for the
            // question.
            $selected = $this.next('.content');

        // Hide all content but what was selected by $.next()
        $content.not($selected).hide();

        // Now show the $this.next('.content'), which we've
        // saved a reference to $selected.
        $selected.show();

        // Toggling the + and -. You can do an $.addClass()
        // and $.removeClass() on the element here.
        $questions.not(this).find('span').text('+');
        $this.find('span').text('-');

        // Return false in case an ANCHOR was clicked, which 
        // will cancel any navigation.
        return false;
    });
});

修改

现在，如果.questions与$.next()不相同.content（并且遍历会适得其反），您还可以在元素的某个部分中使用引用。 Prodigitalson使用href="#myContent1"进行了演示，他将$(this.href)提供给jQuery，以便按.content选择当前id。

我将使用data-格式演示另一种方法。

<div class="container nav-bar"> <div class="questions" data-content-id="#myContent1"> <span>+</span> <a href="#">text</a> </div> <div class='questions' data-content-id="#myContent2"> <span>+</span> <a href="#">text</a> </div> <div class='questions' data-content-id="#myContent3"> <span>+</span> <a href="#">text</a> </div> <div class='questions' data-content-id="#myContent4"> <span>+</span> <a href="#">text</a> </div> <div class='questions' data-content-id="#myContent5"> <span>+</span> <a href="#">text</a> </div> </div>

请注意这一部分：

<div class="questions" data-content-id="#myContent1">

现在我将使用$.data()：

$(function load() { var $questions = $('.questions'), $content = $('.content'); $questions.on('click', function toggle() { var $this = $(this), $selected = $($this.data('content-id')); $content.not($selected).hide(); $selected.show(); $questions.not(this).find('span').text('+'); $this.find('span').text('-'); return false; }); });

http://jsfiddle.net/userdude/VCnQn/

这与我之前显示的方法基本相同，除了：

$selected = $($this.data('content-id'));

我们如何在.questions和.content之间建立关联。很容易。

Answer 3

使用此

var id=0;
while(condition){
    $("#myContent"+id).toggle();
    $('.questions a').toggleClass('DownArrow');
    $('.questions a').toggleClass('RightArrow');
    id++;
}

Answer 4

$('questions a').each(function(){
 $(this).click(function () {
   var clicked_id = $(this).attr('id');
    //*****
    $('questions a').each(function(){ 
     if ($(this).attr('id') == clicked_id ) {$(this).attr('class', 'class_with_sign_-'); }
     else {$(this).attr('class', 'class_with_sign_+');}
     });
    //*****
 });
});

使用增加数字jquery的id选择元素

4 个答案: