0

我正在设计一个网页，我的想法是在顶部有 3 个按钮，如果其中一个按钮单击，则在按钮下方显示一个下拉菜单。我遇到的问题是，如果出现菜单并显示菜单，则不是如何告诉 jquery，这是关闭的，我按下了打开，如果我按下与已经 deslegado 相同的按钮，则关闭。

我尝试了但不起作用

$("#btn2").click(function (e) {
    if( $('.desplegable').css('display') == 'block' ) {
        $('.desplegable').slideUp(1000);    
    }

    $('#desplegable_right').slideToggle(1000);
});

我留下链接：http: //jsfiddle.net/Bu5eX/

我查看了有关 Stackoverflow 的其他问题，但我误解/能够理解任何示例。非常感谢你

4

5 回答 5

1

试试这个 ：

$("#btn1").click(function (e) {
    $('.desplegable').hide();
    $('#desplegable_left').slideToggle(1000);
});
$("#btn2").click(function (e) {
     $('.desplegable').hide();
    $('#desplegable_center').slideToggle(1000);
});
$("#btn3").click(function (e) {
     $('.desplegable').hide();
    $('#desplegable_right').slideToggle(1000);
});

在这里演示

于 2013-05-31T09:50:35.727 回答
1

你可以稍微简化你的选择器：

// use one function for all buttons....
$('.button').click(function(e) {
    // i is current index of the clicked button, and curr
    // the current element.
    var i = $(this).index('.button'),
        curr = $('.desplegable').eq(i);
    // hide all elements (except the current element)
    $('.desplegable').not(curr).hide();
    // slide down the current one (this has only effect in case
    // the current one is invisible. Or in case you want to open
    // close the active one on click use slideToggle instead of slideDown
    curr.slideDown(1000);   
});

更新的小提琴在这里。

于 2013-05-31T10:01:58.560 回答
1

演示http://jsfiddle.net/Bu5eX/9/

将目标添加到您的按钮，这个小脚本将为您的按钮完成所有工作。

*它也会关闭打开的菜单。

查询

$('.button').click(function(){      
    var getID = $(this).attr('target');
    
    if($('#'+getID).css('display') != 'block'){
        $('.desplegable').hide();
        $('#'+$(this).attr('target')).slideDown(500);
    }
    else       
        $('.desplegable').slideUp(500);
});
于 2013-05-31T10:07:19.293 回答
0

您可以使用相同的选择器。当用户单击按钮时，您需要捕获该按钮的索引。然后添加所有 div' 'desplegable' 类 'will-remove' 或类似的东西。然后从具有相同单击按钮索引的 div 中删除此类（将删除）。然后你就知道该怎么做了:)

于 2013-05-31T09:56:03.293 回答
0

切换子面板的打开/关闭

我将从以下HTML开始：

<div class="button-wrap">
    <div id='btn1' class='button'>button1</div>
    <div id='btn2' class='button'>button2</div>
    <div id='btn3' class='button'>button3</div>
</div>
<div id='desplegable_left' class='desplegable btn1'>Left</div>
<div id='desplegable_center' class='desplegable btn2'>Center</div>
<div id='desplegable_right' class='desplegable btn3'>Right</div>

您希望将每个.button元素链接到相应的.desplegable元素，一种方法是将每个元素的id值.button作为类名分配给相应的.desplegable元素。

对于jQuery，请使用以下内容：

$(".button").click(function (e) {
    var theID = $(this).attr("id");
    var theDisplay = $('.desplegable.' + theID).css("display");
    if (theDisplay == 'none') {
        $('.desplegable').hide();
        $('.desplegable.' + theID).slideToggle(1000);
    } else {
        $('.desplegable.' + theID).slideToggle(1000);
    }
});

单击 时.button，获取id属性的值。

然后，您可以使用组合的 CSS 选择器选择相应的目标元素，例如.desplegable.btn1并检查 CSSdisplay属性值以查看它是“none”还是“block”，分别对应于隐藏或显示。

如果目标元素被隐藏 ( display: none)，则隐藏所有目标元素并打开感兴趣的元素。

否则，只需切换或隐藏当前的。

我不确定您是否真的希望目标元素出现在按钮的右侧，然后向下移动到按钮行下方。

您可以通过添加overflow: auto到父级来解决此问题，其中包含包装按钮，如CSS所示：

.button-wrap {
    outline: 1px dotted blue; /* Optional! for demo only */
    overflow: auto; /* This will make sure the floats 
                       don't inteact with .desplegable div's */
}

小提琴演示位于：http: //jsfiddle.net/audetwebdesign/4FWMe/

于 2013-05-31T10:47:06.723 回答