Question

On my plain HTML page there is a Horizontal Accordion based on jQuery.

In the accordion the expanding images is declared in a class="bg1".

The href= should cover the whole <li class="bg1"> image not only a single textline (see my example). How can I define the <a href= to cover the whole bg1 image?

Here is the code:

HTML:

<ul class="accordion" id="accordion">
    <li class="bg1">
        <div class="heading">Jazzband</div>
        <div class="bgDescription"></div>
        <div class="description">
            <h2>Jazzband</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur.</p>
            <a href="http://www.my_website.com">more &rarr;</a>
        </div>
    </li>
    ...........

CSS:

ul.accordion{
    list-style:none;   
    position:absolute;
    right:80px;
    top:0px;
    font-family: Cambria, serif;
    font-size: 16px;
    font-style: italic;
    line-height: 1.5em;
}
ul.accordion li{
    float:right;
    width:115px;
    height:480px;
    display:block;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    -moz-box-shadow:1px 3px 15px #555;
    -webkit-box-shadow:1px 3px 15px #555;
    box-shadow:1px 3px 15px #555;
}
ul.accordion li.bg1{
    background-image:url(../imgs/bg1_img.jpg);
}

The JavaScript

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#accordion > li').hover(
                function () {
                    var $this = $(this);
                    $this.stop().animate({'width':'600px'},500);        // statt 480px
                    $('.heading',$this).stop(true,true).fadeOut();
                    $('.bgDescription',$this).stop(true,true).slideDown(500);
                    $('.description',$this).stop(true,true).fadeIn();
                },
                function () {
                    var $this = $(this);
                    $this.stop().animate({'width':'115px'},1000);
                    $('.heading',$this).stop(true,true).fadeIn();
                    $('.description',$this).stop(true,true).fadeOut(500);
                    $('.bgDescription',$this).stop(true,true).slideUp(700);
                }
            );
        });
    </script>

Answer 1

您的锚标记需要包围li标记。

<a href="http://www.my_website.com">
     <li class="bg1">
            <div class="heading">Jazzband</div>
            <div class="bgDescription"></div>
            <div class="description">
                <h2>Jazzband</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                    ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                    reprehenderit in voluptate velit esse cillum dolore eu fugiat
                    nulla pariatur.</p>

            </div>
        </li>
</a>

Answer 2

你可以将整个li包装成这样的

 <ul class="accordion" id="accordion">
    <a href="http://www.my_website.com">
        <li class="bg1">
            <div class="heading">Jazzband</div>
            <div class="bgDescription"></div>
            <div class="description">
                <h2>Jazzband</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                    ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                    reprehenderit in voluptate velit esse cillum dolore eu fugiat
                    nulla pariatur.</p>

            </div>
        </li>
      </a>
        ...........

Answer 3

您的锚标记必须是$('canvas#whatever')标记内的第一个内容;标签本身需要提供Accordion功能。但是，您应该能够将所有内容包装在<li>中，将其包装在链接中，并将其粘贴到<div>标记中。

尝试将其从<li>更改为<li class="bg1">，并将<li><a href="http://www.my_website.com"><div class="bg1">类应用于div而不是列表项。

bg1

您可能需要使用CSS以使其正常工作，但它应该为您提供所需的功能（即，手风琴列表项的整个背景充当超链接）。

使用<a> tag

3 个答案: