JQuery UI Accordion，如何使用另一个功能将按钮/链接放置到标题

Question

我真的对这个问题很生气，我很高兴能从你那里得到一点帮助。

我确实有一个工作正常的 JQuery 手风琴。我喜欢在标题的右角放一个 X，然后从列表中删除该项目，但我无法这样做。 标头本身位于

内。 HEADER 标签。这是打开内容。 当我将另一个链接放置到标题时，手风琴未正确显示。 是否有机会放置另一个链接/按钮，如果用户单击它，我可以捕获它并删除该项目？

我尝试了另一种方法，我将按钮放在内容中的 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 标头内创建一个块。然后我将名为工具栏的类添加到块中。然后使用 jquery 选择器获取带有工具栏类的块内的所有锚点，并绑定每个锚点的单击事件。在单击事件中，我使用当前元素的 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

只需捕获手风琴激活并在单击不应触发手风琴的元素时阻止它

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

Answer 4

其他答案可能在某些时候有效，并且可能在某些情况下有效。

相反，我发现将这两种方法与现代 jQuery 和 Javascript 结合使用是可行的。我将一组链接放入职位发布列表中，这些链接都在“applyNowLink”类中：

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

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