JQuery UI Accordion,如何将一个按钮/链接放到另一个函数的头文件中

Question

我真的对这个问题很生气,我很乐意得到你的帮助.

我有一个JQuery手风琴,工作正常.我喜欢在标题的右上角放一个X,然后从列表中删除该项,但我无法做到这一点.标题本身位于<h3><a> HEADER </a></h3标记内.这打开了坎坷.当我把另一个链接放到标题时,手风琴没有正确显示.是否有机会放置另一个链接/按钮,如果用户点击它我可以抓住它并删除该项目？

我尝试了另一种方法,我将按钮放在内容中的div中并试图通过位置将其移动到顶部:relative和-20px,但它没有显示,它被标题覆盖,尽管我将Z-INDEX设置为更高的价值.

听起来很简单,也许我错过了一些东西......但是我现在花了这么多时间来搜索这么多网站但却无法解决它.任何帮助,将不胜感激.

谢谢,马塞尔

Answer 1

这有助于我将UI按钮放入UI手风琴标题而不会干扰事件:

$( "#accordion" ).accordion({ header: "> div > .h3" });
$( "#check" ).button();
$( "#check-label" ).click(function(event){
    event.stopPropagation(); // this is
    event.preventDefault(); // the magic
    log("clicked!");
});

<div id="accordion">
    <div>
        <div class="h3">
            <div class="right-button">
                <input type="checkbox" id="check" /><label for="check" id="check-label"></label>
            </div>
            <a href="#">First</a>
        </div>
        <div>
            <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>

        </div>
    </div>
    <div>
        <div class="h3">
            <a href="#">Second</a>
        </div>
        <div>Phasellus mattis tincidunt nibh.</div>
    </div>
    <div>
        <div class="h3">
            <a href="#">Third</a>
        </div>
        <div>Nam dui erat, auctor a, dignissim quis.</div>
    </div>
</div>

Answer 2

一个较旧的帖子,但对于那些看起来,这是我最终做的是在h3标题内创建一个块.然后我将名为toolbar的类添加到块中.然后使用jquery选择器使用工具栏类获取块内的所有锚点,并绑定每个块的click事件.在click事件中,我使用当前元素href属性来设置window.location值以强制浏览器到我想要导航到的页面.在这个例子中,它是一个编辑和删除页面.

<div id="accordion">
   <h3>Header 1
   <span style="float:right;" class="toolbar ui-widget-header ui-corner-all">
     <a href="/EditPage.html">Edit</a>
     <a href="/DeletePage.html">Delete</a>
   </span>
   </h3>
   <div>
    Content 1
   </div>
   <h3>Header 2
   <span style="float:right;" class="toolbar ui-widget-header ui-corner-all">
     <a href="/EditPage.html">Edit</a>
     <a href="/DeletePage.html">Delete</a>
   </span>
   </h3>
   <div>
    Content 2
   </div>
</div>

<script type="text/javascript">
 $("#accordion").accordion();

 $(".toolbar a").live("click", function() { 
  window.location($(this).attr("href")); 
 }); 
</script>