Question

所以我有一个以垂直顺序出现的div列表。其中两个包含点击（.expand）时出现的链接。我想要做的是当你点击任一个.expand div时，其余的div将淡入.7不透明度，包括另一个.expand。我对jquery比较新，所以if else语法不是我最强的技能......这就是我认为会使这个请求工作的原因。虽然我对任何解决方案持开放态度。

function toggle_visibility(id) {
        var e = document.getElementById(id);
        if(e.style.display == 'none')
        e.style.display = 'block';
   else
        e.style.display = 'none';
    }

    <div>
        <a href="/"target="_blank" class="business">div1</a>
    </div>
    <div>
        <a href="/"target="_blank" class="invention">div2</a>
    </div>
    <div class="expand"> 
        <a href="#" onclick="toggle_visibility('1expandhiddenlinks');"class="business" ><span class="plus">+</span> expand1</a>
        <div id="1expandhiddenlinks" style="display:none">
                <a href="/"target="_blank" class="business" style="color:#f36523">1</a><br />
                <a href="/"target="_blank" class="business" style="color:#f36523">2</a><br />
                <a href="/"target="_blank" class="business" style="color:#f36523">3</a>
        </div>
    </div>
    <div>
        <a href="/"target="_blank" class="invention">div4</a>
    </div>
    <div>
        <a href="/"target="_blank" class="invention">div5</a>
    </div>      
    <div>
        <a href="/" target="_blank" class="brand">div6</a><br />
    </div>
    <div>
        <a href="/" target="_blank" class="brand">div7</a><br />
    </div>
    <div class="expand">
        <a href="#" onclick="toggle_visibility('2expandhiddenlinks');" class="brand"><span class="plus">+</span>  expand2</a><br />
            <div id="2expandhiddenlinks" style="display:none">
                <a href="/"target="_blank" class="business" style="color:#f36523">Keep It or Pass It</a><br />
                <a href="/"target="_blank" class="business" style="color:#f36523">Shake (shops)</a><br />
        </div>
    </div>
    <div>
        <a href="/" target="_blank" class="brand">div8</a><br/>
    </div>

Answer 1

声明具有所需不透明度的CSS类名称的简便方法，然后在相关项目中添加或删除此类。

$('.expand').addClass('faded')

Answer 2

你想要这样的东西吗？：http://jsfiddle.net/8quaH/1/

修改我添加了淡化效果：

$(function(){ $("#container").find("div").click(function(){ if($(this).hasClass("expand")) $(this).fadeTo(300, 1).siblings().fadeTo(300, .4); else $("#container").find("div").fadeTo(300, 1); }); });

请参阅siblings() doc。

Answer 3

这个怎么样？

$('div.expand').click(function(){
    $('div').not(this).animate({'opacity':.7})
});

Answer 4

我相信这就是你所要求的：

$('#menu .expand > a').on('click', function() {

    var $sibs = $(this).siblings('div').toggle();
    var vis = $sibs.filter(':visible').length > 0; // check visibility
    var opacity = vis ? 0.2 : 1.0;                 // required opacity

    $(this).parent().css('opacity', 1).siblings().animate({
        'opacity': opacity
    });
});

我在整个地方添加了一个包装div，以将效果与菜单隔离开来。

请注意：

完全消除了对内联事件处理程序的需求
还处理切换子元素的显示

请参阅http://jsfiddle.net/alnitak/LBhgZ/

我没有对其效率提出任何要求 - 可能有更好的方法来检查切换是否显示或隐藏了子菜单。

选择其他特定div时，将某些div的不透明度设置为.7

4 个答案: