JQuery UI Akordeon, başka bir işlevle başlığa bir düğme/bağlantı nasıl konulur

Question

Bu konuda gerçekten çok kızıyorum ve sizden biraz yardım almaktan memnuniyet duyarız.

İyi çalışan bir JQuery akordeonum var. Üstbilginin sağ köşesine bir X koymayı, sonra da öğeyi listeden silmeyi severim ama bunu yapamıyorum. Başlığın kendisi <h3><a> HEADER </a></h3 etiketi içinde. Bu konuyu açıyor. Başlığa başka bir link koyduğum zaman akordeon doğru gösterilmiyor. Başka bir bağlantı/düğme koymak için bir şans var mı ve kullanıcı üzerine tıklarsa onu yakalayabilir ve öğeyi silebilirim?

Başka bir yöntem denedim, düğmeyi içeriğindeki bir div içine koydum ve konum aracılığıyla üst tarafa taşımaya çalıştım: göreceli ve -20px, ancak gösterilmemesine rağmen, başlığın üst kısmına yazıldım. Z-INDEX daha yüksek bir değere.

Çok kolay bir şey gibi geliyor, ve belki de bir şeyleri özlüyorum ... ama şimdi bunun üzerine çok fazla zaman harcadım ve pek çok site aradım ama çözemedim. Herhangi bir yardım mutluluk duyacaktır.

sayesinde Marcel

Answer 1

Bu bana olayların müdahale olmadan UI-akordeon başlığına UI-düğme koymak için yardımcı olur:

$("#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

eski bir yazı, ama arayanlar için, bu ne olduğunu ben sona erdi h3 başlığının içinde bir blok yaratıyor. Sonra bloğa araç çubuğu denilen sınıfı ekledim. Daha sonra blokların içindeki tüm ankrajları araç çubuğu sınıfıyla almak ve her birinin tıklama olayını bağlamak için jquery seçiciyi kullandı. Tıklama olayının içinde, tarayıcıyı gezinmek istediğim sayfaya zorlamak için window.location değerini ayarlamak üzere mevcut href özniteliğini kullandım. Bu örnekte bir düzenleme ve silme sayfasıdır.

<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

Diğer cevapların belirli bir zamanda çalıştığı ve bazı durumlarda çalışmış olabileceği olasıdır.

Bunun yerine, modern jQuery ve Javascript ile iki yaklaşımın bir kombinasyonunu kullanmaya çalıştığını buldum. Ben iş ilanları bir liste halinde bağlantıların bir dizi koymak ve ettik nerede bağlantıları 'applyNowLink' sınıftaki tüm şunlardır: Benim için

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

eserler. Varsayılan eylemin engellenmesi iki e-posta penceresinin açılmasına neden olmamıştır (href bir mailto:)