Thỏa thuận giao diện người dùng JQuery, cách đặt nút/liên kết đến tiêu đề bằng một chức năng khác

Question

Tôi thực sự phát điên về vấn đề này và tôi rất vui khi nhận được một chút trợ giúp từ bạn.

Tôi có một accordion JQuery đang hoạt động tốt. Tôi thích đặt dấu X ở góc phải của tiêu đề, sau đó xóa mục khỏi danh sách nhưng tôi không thể làm điều đó. Chính tiêu đề nằm trong thẻ <h3><a> HEADER </a></h3. đây là mở conent. Khi tôi đặt một liên kết khác vào tiêu đề, accordion không được hiển thị chính xác. Có cơ hội để đặt vào một liên kết/nút khác và nếu người dùng nhấp vào nó, tôi có thể bắt và xóa mục đó không?

Tôi đã thử một phương pháp khác, tôi đặt nút trong div trong nội dung và cố di chuyển nó lên trên cùng thông qua vị trí: tương đối và -20px, nhưng nó không được hiển thị, nó bị ghi đè từ tiêu đề, mặc dù tôi đã đặt Z-INDEX đến giá trị cao hơn.

Âm thanh như một điều rất dễ, và có thể tôi đã bỏ lỡ điều gì đó ... nhưng tôi đã dành rất nhiều giờ cho việc này và đã tìm kiếm rất nhiều trang nhưng không thể giải quyết được. Mọi trợ giúp sẽ được đánh giá cao.

Cảm ơn, Marcel

Answer 1

Điều này giúp tôi để đặt UI-button vào tiêu đề UI-accordion mà không can thiệp vào các sự kiện:

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

Một bài cũ, nhưng đối với những người tìm kiếm, đây là những gì tôi cuối cùng làm là tạo một khối bên trong tiêu đề h3. Sau đó, tôi đã thêm lớp được gọi là thanh công cụ vào khối. Sau đó, sử dụng bộ chọn jquery để có được tất cả các neo bên trong của các khối với lớp thanh công cụ và ràng buộc sự kiện nhấp chuột của mỗi. Bên trong sự kiện nhấp chuột, tôi đã sử dụng thuộc tính element href hiện tại để đặt giá trị window.location để buộc trình duyệt đến trang mà tôi muốn điều hướng đến. Trong trường hợp này, đây là trang chỉnh sửa và xóa.

<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

Có thể các câu trả lời khác đã hoạt động tại một thời điểm và có thể đã hoạt động trong một số trường hợp nhất định.

Tôi đã tìm thấy thay vào đó nó hoạt động để sử dụng kết hợp hai cách tiếp cận, với jQuery và Javascript hiện đại. Tôi đã đặt một tập hợp các liên kết vào danh sách các bài đăng về công việc và các liên kết đều nằm trong lớp 'applyNowLink':

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

Làm việc cho tôi. Không ngăn tác vụ mặc định làm cho hai cửa sổ email mở (href = mailto:)