JQuery Accordion: открывайте ссылку вместо скольжения вниз по аккордеону при нажатии на заголовок - PullRequest
Новая
       11

JQuery Accordion: открывайте ссылку вместо скольжения вниз по аккордеону при нажатии на заголовок

0 голосов
/ 18 апреля 2011

ОБНОВЛЕНИЕ: 

$('#menu1').bind('accordionchangestart', function(e, ui)
{
    console.log( 'accordionchangestart event triggered' );
    e.preventDefault();
});

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

Я пробовал return false и e.stopImmediatePropagation().Ни один из них не препятствует скольжению аккордеона.

Вот мой HTML-код аккордеона: 

<div id="menu1">
    <div>
        <h3><a href="#">Item 1</a></h3>
        <div>
            <a href="#">Item 1.1</a><br>
            <a href="#">Item 1.2</a><br>
            <a href="#">Item 1.3</a><br>
            <a href="#">Item 1.4</a><br>
        </div>
    </div>
    <div>
    <h3><a href="item2.html">Item 2</a></h3>
    <div></div>
    </div>
    <div>
    <h3><a href="#">Item 3</a></h3>
    <div>
        <a href="#">Item 3.1</a><br>
        <a href="#">Item 3.2</a><br>
        <a href="#">Item 3.3</a><br>
        <a href="#">Item 3.4</a><br>
    </div>
    </div>
</div>

Я хочу, чтобы аккордеон работал нормально, кроме случаев, когда ссылка на заголовокне #.Например, Item 2 href это item2.html.В этом случае я хочу, чтобы он функционировал как обычная ссылка и открывал страницу.

Ответы [ 3 ]

1 голос
/ 18 апреля 2011

Вот что вы можете сделать:

HTML: 

<div id="menu1">
    <div>
        <h3><a href="#">Item 1</a></h3>
        <div>
            <a href="#">Item 1.1</a><br>
            <a href="#">Item 1.2</a><br>
            <a href="#">Item 1.3</a><br>
            <a href="#">Item 1.4</a><br>
        </div>
    </div>
    <div>
    <h3><a href="item2.html">Item 2</a></h3>
    <div></div>
    </div>
    <div>
    <h3><a href="#">Item 3</a></h3>
    <div>
        <a href="#">Item 3.1</a><br>
        <a href="#">Item 3.2</a><br>
        <a href="#">Item 3.3</a><br>
        <a href="#">Item 3.4</a><br>
    </div>
    </div>
</div>

Javscript: 

$(document).ready(function(){
    $("#menu1 div div").hide();
    $("#menu1 div h3 a").click(function(e){
        if($(this).attr("href") == "#"){      
            e.preventDefault();
            $("#menu1 div div").slideUp();
            $(this).parent().next().slideDown();
        }
    });
});

jsfiddle

0 голосов
/ 18 апреля 2011

Можете ли вы показать нам используемый плагин?Или это самодельный?

Если это плагин, вы можете перейти на мероприятие и сказать: если href отличается от #, тогда перейдите по ссылке.

для примера 

$('h3').click(function(){
   if($(this).attr('href') != '#'){ return true; }
});

Или что-то в этом роде.Трудно сказать без сценария JavaScript.

0 голосов
/ 18 апреля 2011

изменить событие клика, чтобы включить что-то вроде этого: 

if ($(this).attr("href") != "#") {
  window.location = $(this).attr("href");
  return;
}
...