如何使jQueryUI保持水平？_Jquery_Html_Css_Accordion

如何使jQueryUI保持水平？

jquery html css

如何使jQueryUI保持水平？,jquery,html,css,accordion,Jquery,Html,Css,Accordion,这就是我到目前为止所做的 <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Accordion - Open on hoverintent</title> <link rel="stylesheet" href="jquery.ui.all.css"> <scri

这就是我到目前为止所做的

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Accordion - Open on hoverintent</title>
    <link rel="stylesheet" href="jquery.ui.all.css">
    <script src="jquery-1.9.1.js"></script>
    <script src="jquery.ui.core.js"></script>
    <script src="jquery.ui.widget.js"></script>
    <script src="jquery.ui.accordion.js"></script>
    <link rel="stylesheet" href="demos.css">
    <script src="jquery-ui.js"></script>
    <script>
        $(function() {
            $("#accordion").accordion({
                event: "click hoverintent",
                heightStyle: "content"
            });
        });

        $.event.special.hoverintent = {
            setup: function() {
                $(this).bind("mouseover", jQuery.event.special.hoverintent.handler);
            },
            teardown: function() {
                $(this).unbind("mouseover", jQuery.event.special.hoverintent.handler);
            },
            handler: function(event) {
                var currentX, currentY, timeout,
                        args = arguments,
                        target = $(event.target),
                        previousX = event.pageX,
                        previousY = event.pageY;

                function track(event) {
                    currentX = event.pageX;
                    currentY = event.pageY;
                }
                ;

                function clear() {
                    target
                            .unbind("mousemove", track)
                            .unbind("mouseout", clear);
                    clearTimeout(timeout);
                }

                function handler() {
                    var prop,
                            orig = event;

                    if ((Math.abs(previousX - currentX) +
                            Math.abs(previousY - currentY)) < 7) {
                        clear();

                        event = $.Event("hoverintent");
                        for (prop in orig) {
                            if (!(prop in event)) {
                                event[ prop ] = orig[ prop ];
                            }
                        }
                        // Prevent accessing the original event since the new event
                        // is fired asynchronously and the old event is no longer
                        // usable (#6028)
                        delete event.originalEvent;

                        target.trigger(event);
                    } else {
                        previousX = currentX;
                        previousY = currentY;
                        timeout = setTimeout(handler, 100);
                    }
                }

                timeout = setTimeout(handler, 100);
                target.bind({
                    mousemove: track,
                    mouseout: clear
                });
            }
        };
    </script>
</head>
<body>
    <div id="jq">

    <div id="accordion">
        <h3>title</h3>
        <div>
            content
        </div>
        <h3>title</h3>
        <div>
           content
        </div>

    </div>
    </div>
    </body>
</html>


jqueryui Accordion-在hoverintent上打开
$（函数（）{
$（“手风琴”）。手风琴({
事件：“单击鼠标悬停意图”，
高度样式：“内容”
});
});
$.event.special.hoverintent={
设置：函数（）{
$（this.bind（“mouseover”，jQuery.event.special.hoverintent.handler）；
},
拆卸：函数（）{
$（this.unbind（“mouseover”，jQuery.event.special.hoverintent.handler）；
},
处理程序：函数（事件）{
var currentX，currentY，超时，
args=参数，
target=$（event.target），
previousX=event.pageX，
previousY=event.pageY；
功能跟踪（事件）{
currentX=event.pageX；
currentY=event.pageY；
}
;
函数clear（）{
目标
.unbind（“mousemove”，轨迹）
.解除绑定（“鼠标出”，清除）；
clearTimeout（超时）；
}
函数处理程序（）{
var prop，
orig=事件；
if（（数学绝对值）（上一个x-当前x）+
Math.abs（先前-当前））<7）{
清除（）；
事件=$.event（“hoverintent”）；
用于（原始道具）{
如果（！（事件中的道具））{
事件[道具]=原始[道具]；
}
}
//自新事件发生后阻止访问原始事件
//异步激发，旧事件不再
//可用（#6028）
删除event.originalEvent；
目标。触发（事件）；
}否则{
previousX=当前X；
先前的y=当前的y；
超时=设置超时（处理程序，100）；
}
}
超时=设置超时（处理程序，100）；
target.bind({
mousemove:track，
鼠标：清除
});
}
};
标题
内容
标题
内容

可以把它调到水平位置吗？我尝试过在网上找到的其他代码，但限制是长度和宽度是固定的，当然还有设计。我更喜欢默认设计。：）

使用另一个插件。例如：可以使用旋转它。或者，您可以编写自己的旋转函数，但使浏览器独立是一个棘手的问题。我得到了答案。在这个链接中，它使用css，但是有这个限制，容器不能根据内容自动调整大小，但是容器可以很容易地调整大小。目前，这对我来说已经足够了，但如果有人能根据内容调整大小，我将不胜感激。：）请看这里：