2

如何使用 CSS 和/或 JQuery（包括 JQueryUI）来做到这一点

但不是 mooTools....

我一直在尝试使用 CSS :before :after arrow.top 等来做到这一点。我可以得到一个箭头，有时旋转矩形，有时使用 :before 但切换参数以尝试获得正确的位置不会似乎把它放在正确的地方。

我的页面顶部只有一个按钮，我想单击它并加载带有$("ul li div)元素的 div。

在此处输入图像描述

我认为这种类型的 UI 元素缺乏特定的术语是很难描述我想要什么的原因。“箭头”或“指针”太笼统了。我也尝试使用 Jquery UI 工具提示，但我无法让它加载从 AJAX 调用中获取的 ul->li 项目列表。还在玩 JQuery UI 对话框。也许是因为我试图以许多不同的方式做到这一点。我想我应该从一些 div 开始，然后从那里开始工作。

无论如何，一张图片值得 1000 字，所以这里有一个例子.....我将删除我的另一个问题。

在此处输入图像描述

在此处输入图像描述

4

1 回答 1

2

你的问题不清楚，但我认为你想要这样的东西：

HTML：

<div class="containner">
    Hello
    <div class="arrow arrow-right"></div>
    <div class="clear"></div>
</div>

CSS：

.containner {
    width:100px;
    height;100px;
    border:solid black 1px;
    text-align:center;
    cursor:pointer;
    background:#ccc;
    color:#fff;
}
.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #fff;
    float:right;
}

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #fff;
    float:right;
    margin-top: 5px;
}

.clear {
    clear:both;
    font-size:1px;
}

JS：

$('.containner').on('click', function(){
    // other code
    $(this).find('.arrow').toggleClass('arrow-right arrow-down')
});
于 2013-07-23T00:18:07.587 回答