аккордеонное меню перестает работать над добавлением ссылок href - PullRequest
Новая
       28

аккордеонное меню перестает работать над добавлением ссылок href

2 голосов
/ 01 марта 2011

Вот мой простой аккордеон: 

<script type="text/javascript">
$(function()
{
    $("dt.title").click(function()
    { 
      $("div.info").slideUp("slow"); 
      $(this).next("div.info:hidden").slideDown("normal" );
    });
});
</script>

И он отлично работает с этим HTML: 

<body>
<div id="wrapper">
<div id="container">

<ul id="nav">
<dt class="title"><a href="#">About</a></dt>
<dt class="title"><a href="#">Work</a></dt>
<div class="info">
<ul>
<li><a href="#">Bol</a></li>
<li><a href="#">Annie</a></li>
<li><a href="#">Imran</a></li>
</ul>
</div>
<dt class="title"><a href="#">Contact</a></dt>
<dt class="title"><a href="#">Links</a></dt>
</ul>
</div>
<div id="content">
</div>
</div>
</body>
</html>

Когда я ставлю ссылки href, меню перестает работать.Например: 

<dt class="title"><a href="about.html">About</a></dt>

Также скажите мне, как я могу добавить активное и зависание в меню.

Ответы [ 2 ]

2 голосов
/ 01 марта 2011

Вы забыли return false

<script type="text/javascript">
$(function()
{
    $("dt.title").click(function(){ 
        $("div.info").slideUp("slow"); 
        $(this).next("div.info:hidden").slideDown("normal" );
        return false; //do it here
    });
});
</script>
<body>
    <div id="wrapper">
        <div id="container">

            <ul id="nav">
                <dt class="title"><a href="#">About</a></dt>
                <dt class="title"><a href="about.html">Work</a></dt>
                <div class="info">
                    <ul>
                    <li><a href="#">Bol</a></li>
                    <li><a href="#">Annie</a></li>
                    <li><a href="#">Imran</a></li>
                    </ul>
                </div>
                <dt class="title"><a href="#">Contact</a></dt>
                <dt class="title"><a href="#">Links</a></dt>
            </ul>
        </div>
        <div id="content">
        </div>
    </div>
</body>

Если вы планируете загрузить содержимое элемента about.html в content, используйте метод load.Ваша функция будет выглядеть примерно так: 

    $("dt.title").click(function(){ 
        $("div.info").slideToggle("slow");
        $('#content').load($(this).find('a').attr('href'));
        return false;
    });

Но это не будет работать для междоменного URL.

[ОБНОВЛЕНИЕ] 

<script type="text/javascript">

//no use for this var
var loader = $("<div></div>").html('Loading')

$(document).ready(function() {

    $(".title").click(function(){ 

        $(this).find("ul").slideToggle("slow");

        //do all the animations here
        //but using $.get, you will get more animation effect
        //I guess

        $('#content').load($(this).find('a').attr('href'));

        return false;
    });

    //similarly for inner link
    $(".title ul a").click(
        function ()
        {   
            $('#content').load($(this).attr('href'));

            return false;
    }); 

});

</script>
<body>
<div id="wrapper">
    <div id="container">

    <ul id="nav">   
    <dt class="title"><a href="test.php">About</a>
        <ul>
                <li><a href="test.php">Bol</a></li>
                <li><a href="test.php">Annie Khalid</a></li>
                <li><a href="test.php">Imran</a></li>
        </ul>
    </dt>

    <dt class="title"><a href="test.php">Work</a>
        <ul>
                <li><a href="test.php">Bol</a></li>
                <li><a href="test.php">Annie Khalid</a></li>
                <li><a href="test.php">Imran</a></li>
        </ul>
    </dt>

    <dt class="title"><a href="test.php">Contact</a>
        <ul>
                <li><a href="test.php">Bol</a></li>
                <li><a href="test.php">Annie Khalid</a></li>
                <li><a href="test.php">Imran</a></li>
        </ul>

    </dt>    

    <dt class="title"><a href="test.php">Links</a>
        <ul>
                <li><a href="test.php">Bol</a></li>
                <li><a href="test.php">Annie Khalid</a></li>
                <li><a href="test.php">Imran</a></li>
        </ul>

    </dt>
    </ul>    

    </div>

    <div id="content">      
    <p>Welcome to my site!!!!!!!!!!!!!!!!!!!!!!!</p>

    <p>In this tutorial we will be taking your average everyday website and enhancing it with jQuery.
     We will be adding ajax functionality so that the content loads into the relevant container instead
      of the user having to navigate to another page. We will also be integrating some awesome effects...
    </p>
    </div>

</div>
</body>
1 голос
/ 01 марта 2011

Это потому, что вы не мешаете браузеру выполнить запрос на ссылку. Поэтому он рассматривается как ссылка. Вы можете либо return false; в конце щелкнуть функцию, либо динамически заменить значение атрибута href (JavaScript) на #;

[EDIT] Это должно работать, хотя я не проверял это. Надеюсь, по крайней мере, это дает вам идею. 

<script type="text/javascript">
$(function()
{
    $("dt.title").click(function(){ 
      $("div.info").slideUp("slow"); 
      $(this).next("div.info:hidden").slideDown("normal" );
      return false;
    }).hover(function(){
        $(this).addClass("hover");
      },function(){
        $(this).removeClass("hover");
    }).each(function(){
      $(this).attr("href","#");
    });
});
</script>
...