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>

Answer 3

其他答案可能在某个时间起作用，并且可能在某些情况下起作用。

我发现它可以使用两种方法的组合，使用现代的jQuery和Javascript。我将一组链接放入工作发布列表中，并且所有链接都在“applyNowLink”类中：

$( ".applyNowLink" ).on("click", null, null, function(event) { 
      window.location.href = $(this).attr("href"); 
      event.preventDefault(); 
 }); 

适合我。不阻止默认操作导致两个电子邮件窗口打开（href是一个mailto:）

Answer 4

如果在不应触发手风琴的元素上发生咔嗒声，请抓住手风琴激活并防止它

$("#accordion").accordion({
     beforeActivate: function(event, ui) {
          var target = event.originalEvent.target;
          if (target.text == "x") {
             //do your logic
             return false;
         }
     }
});