jQueryのUIアコーディオン、別の機能

Question

私は本当にこの問題について怒っていると私はあなたからの少しの助けを得るために喜んでいるだろうとヘッダへのボタン/リンクを配置する方法について説明します。

私は正常に動作しているjQueryのアコーディオンを持っています。ヘッダーの右隅にXを置いて、リストから項目を削除するのが好きですが、それはできません。 ヘッダー自体が<h3><a> HEADER </a></h3タグ内にあります。これはconentを開いています。 ヘッダーに別のリンクを付けると、アコーディオンが正しく表示されません。 別のリンク/ボタンを置く機会はありますか？ユーザーがクリックすると、それを捕まえてアイテムを削除できますか？

もう1つの方法を試しましたが、コンテンツのdivにボタンを置いて、相対位置と-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

古いポストが、お探しの方のために、これは何をあるI h3ヘッダーの内側にブロックを作成していました。それから私はブロックにツールバーと呼ばれるクラスを追加しました。次に、jqueryセレクターを使用して、ツールバークラスを使用してブロック内のすべてのアンカーを取得し、それぞれのクリックイベントをバインドします。 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を使用して、2つのアプローチの組み合わせを使用することを動作することを代わりに見つけました。どこで求人広告のリストにリンクのセットに置かれている、とのリンクはすべて「applyNowLink」クラスにあります。私のために

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

作品。