JQuery UI Accordion, как поместить кнопку / ссылку в заголовок с другой функцией - PullRequest
Новая
       33

JQuery UI Accordion, как поместить кнопку / ссылку в заголовок с другой функцией

5 голосов
/ 07 февраля 2012

Я действительно схожу с ума от этой проблемы, и я был бы рад получить от вас небольшую помощь.

У меня действительно есть аккордеон JQuery, который работает отлично.Мне нравится ставить X в правом углу заголовка, который затем удаляет элемент из списка, но я не могу этого сделать.Сам заголовок находится внутри тега <h3><a> HEADER </a></h3.это открывает собрание.Когда я помещаю другую ссылку на заголовок, аккордеон не отображается правильно.Есть ли возможность поставить еще одну ссылку / кнопку, и если пользователь щелкнет по ней, я смогу ее перехватить и удалить элемент?

Я попробовал другой метод, поместил кнопку в элемент div ипопытался переместить его в верхнюю позицию с помощью позиции: относительный и -20px, но он не отображается, он перезаписывается из заголовка, хотя я установил Z-INDEX на более высокое значение.

Звучит как очень простая вещьи, может быть, я что-то упустил ... но я потратил так много часов на это сейчас и искал так много сайтов, но не смог решить это.Любая помощь будет оценена.

Спасибо, Марсель

Ответы [ 4 ]

7 голосов
/ 14 апреля 2012

Это помогает мне поместить 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>
5 голосов
/ 11 декабря 2012

Более старая запись, но для тех, кто ищет, я закончил тем, что создал блок внутри заголовка h3. Затем я добавил класс с именем панель инструментов в блок. Затем использовал селектор jquery, чтобы получить все якоря внутри блоков с помощью класса панели инструментов и связать событие click каждого из них. Внутри события click я использовал атрибут href current elements, чтобы установить значение 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>
0 голосов
/ 12 марта 2019

Просто поймайте активацию аккордеона и предотвратите ее, если произойдет щелчок по элементу, который не должен вызывать аккордеон 

$("#accordion").accordion({
     beforeActivate: function(event, ui) {
          var target = event.originalEvent.target;
          if (target.text == "x") {
             //do your logic
             return false;
         }
     }
});
0 голосов
/ 24 января 2015

Возможно, что другие ответы сработали в какое-то время и, возможно, сработали при определенных обстоятельствах.

Вместо этого я обнаружил, что он работает с использованием комбинации двух подходов с современными jQuery и Javascript,Там, где я поместил набор ссылок в список объявлений о вакансиях, и все ссылки находятся в классе applyNowLink: 

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

Работает для меня.Не предотвращение действия по умолчанию привело к открытию двух окон электронной почты (href - mailto:)

...