0

我正在写一些类似于 JQuery UI 手风琴的东西，但是是垂直的。我让它工作得很好，但有一个例外。当您单击第三个选项卡时，它会向左浮动并按预期显示所需的文本，但它会移动到第二个选项卡之前的位置。将标签顺序设为 132 而不是 123。在其他所有状态下，数字都可以。

关于使浮动以正确顺序停止的任何想法

我知道可以使用其他垂直手风琴，但 js 是我的弱项之一，我这样做更多是为了学习。

我把它保存在一个jsfiddle

我的 Javascript 代码

    $(document).ready(function(){
            $("#1").css("background-color","#191970");
            $("#1").css("width", "50px");
            $("#1").css("float", "left");
            $("#2").css("background-color","#191970");
            $("#2").css("width", "50px");
            $("#2").css("float", "right");
            $("#3").css("background-color","#191970");
            $("#3").css("width", "50px");
            $("#3").css("float", "right");
            $("#boxmain").css("background-color", "#CCC");
            $("#boxmain").css("width", "400px");

            $("#boxmain").text($("#onet").text());
            $('p').hide();



    $("#1").click(function() {
            $("#2").css("float", "right");
            $("#3").css("float", "right");
            $("#boxmain").effect("highlight", {color: '#DDD'}, 900);
            $("#boxmain").text($("#onet").text());
    });

    $("#2").click(function() {
            $("#2").css("float", "left");
            $("#3").css("float", "right");
            $("#boxmain").effect("highlight", {color: '#DDD'}, 900);
            $("#boxmain").text($("#twot").text());
    });

    $("#3").click(function() {
            $("#3").css("float", "left");
            $("#2").css("float", "left");
            $("#boxmain").effect("highlight", {color: '#DDD'}, 900);
            $("#boxmain").text($("#threet").text());
    });
});
4

2 回答 2

1

您的 div 在标记中以这种方式排序。您将无法通过更改浮动方向来获得想要的效果。相反，您可以移动您的boxmaindiv。请考虑以下代码：

http://jsfiddle.net/Lanny/4snqy/18/

于 2013-06-22T21:10:32.887 回答
1

我可以帮你简化很多。有很多要阅读的内容，但是如果您愿意，可以先在jsfiddle上看到它。你不需要交换浮动，你可以交换不同的容器。首先，一些CSS：

.accordion {
    height:200px;
    float: left;
    border:#fff solid 1px;
    border-radius: 10px 10px 10px 10px;
    color:white;
    width: 50px;
    background: #191970;
}

.boxMain {
    width: 400px;
    background: #CCC;
}

然后 HTML-注意我是如何使用手风琴类来整理它的：

<div style="height:200px;width:558px;" id="box">
    <div id="1" class="accordion">1</div>
    <div id="boxmain" class="accordion boxMain"></div>
    <div id="2" class="accordion">2</div>
    <div id="3" class="accordion">3</div>
</div>

<p id="onet">Number One Text</p>
<p id="twot">Number Two Text</p>
<p id="threet">Number Three Text</p>

现在是脚本。我已经删除了所有的 CSS 语句，因为它是用 CSS 完成的。之后我会解释 .click() 方法。

$(document).ready(function(){
    $("#boxmain").text($("#onet").text());
    $('p').hide();          

    $("#1").click(function() {
        $("#boxmain").insertAfter(this);
        $("#boxmain").effect("highlight", {color: '#DDD'}, 900);
        $("#boxmain").text($("#onet").text());
    });

    $("#2").click(function() {
        $("#boxmain").insertAfter(this);
        $("#boxmain").effect("highlight", {color: '#DDD'}, 900);
        $("#boxmain").text($("#twot").text());
    });

    $("#3").click(function() {
        $("#boxmain").insertAfter(this);
        $("#boxmain").effect("highlight", {color: '#DDD'}, 900);
        $("#boxmain").text($("#threet").text());
    });
});

click 方法使用“this”的概念来引用 click() 正在运行的元素。在$("#1").click()$(this) 的情况下是指#1。与其尝试移动浮动，不如移动#boxmain 元素。

于 2013-06-22T21:13:27.307 回答