3

我有一个小问题，即 onclick 函数无法同时对 html 文档进行两种不同的更改。需要的是 - 单击链接应切换父元素的“活动”类并切换各个隐藏 div 的可见性。我得到的是每次连续单击都会交替进行更改（我在下面提供了 jsfiddle 链接）。在我添加最接近（）（或父（））函数之前工作正常。我不知道是怎么回事。将不胜感激一些帮助。

这是html：

<div id="wrapper">
<div class="argle"><a href="#">Argle</a>
</div>
<div class="bargle"><a href="#">Bargle</a>
</div>
<div class="shmargle"><a href="#">Schmargle</a>
</div>
</div>
<div id="windows">
<div class="w-argle">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,</div>
<div class="w-bargle">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed     diam    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam er</div>
<div class="w-shmargle">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,.</div>
</div>

这是js：

$(function () {
$('#wrapper a').click(function (event) {
    event.preventDefault();
    var parentElement = $(this).closest('div');
    var targetElement = $('.w-' + parentElement.attr('class'));
    parentElement.toggleClass('active');
    targetElement.toggle();
});

});

在这里在线：http: //jsfiddle.net/alalpgrlv/ycJk4/4/

4

5 回答 5

1 
$(".argle").click(function(){
$("#windows").find('.w-argle').slideToggle();
});

http://jsfiddle.net/ablealias/zCFff/1/

于 2013-06-29T09:39:29.553 回答
1

工作示例：DEMO

$(function () {
    $('#wrapper a').click(function (event) {
        event.preventDefault();
        var parentElement = $(this).closest('div');
        var targetElement = $('.w-' + parentElement.attr('class'));

        //Hide all other div
        $('[class^=w-]').not(targetElement).hide();

        //Remove active class
        $('#wrapper').find('div').not(parentElement).removeClass('active');

        //Toggle clicked link
        parentElement.toggleClass('active');        
        targetElement.toggle();
    });
});
于 2013-06-29T09:35:19.270 回答
1

您将“活动”类添加到元素，然后将其用作 targetElement 中选择器的一部分，因此 targetElement 将是 ie: $('.w-argle active') 不存在。尝试这个。

cls = (parentElement.attr('class').split(" "))[0];
var targetElement = $('.w-' + cls);
于 2013-06-29T09:35:22.487 回答
0

你想要这样的 DEMO http://jsfiddle.net/yeyene/ycJk4/6/

$(function () {
    $('#wrapper a').click(function (event) {
        $('#windows div').slideUp();
        $('#windows .w-'+$(this).parent('div').attr('class')).slideToggle(500);
    });
});
于 2013-06-29T09:41:23.147 回答
0

问题出现了，因为您将活动类添加到 parentElement。（这意味着第二次，您正在搜索一个不存在的元素）。

您可以尝试只获得头等舱

parentElement.attr('class').split(" "))[0];

或者您可以使用元素上的 HTML5 数据简单地添加 targetElement 类。

我修改了您的示例，这是链接：

http://jsfiddle.net/ycJk4/7/

于 2013-06-29T09:49:36.760 回答