使用jQuery切换多个ID

时间:2015-01-09 16:00:38

标签: jquery html

我有一个包含2列多个div的页面。它们基本上是描述,用户可以单击“阅读更多”按钮来展开描述。然后会出现“长”类。当用户点击另一个Read More div时,我希望当前的div关闭,而新的div要扩展。但是,当我点击一个按钮时,我的jQuery有点关闭,所有div打开,当我再次点击所有div关闭时。

第三个功能是我需要重写的功能,这样我打开第一个div,只有一个打开,当我打开第二个div时,第一个关闭。任何帮助表示赞赏谢谢。

以下是HTML的摘录。

HTML

<section id="tom-box">
    <img class="image" src="img/tom.png" align="left">
    <h3>Person</h3>
    <h2>Description</h2>
    <article class="short">Lorem ipsum. This part automatically shows.</article>

    <div class="long">This part is hidden until clicked on Read More button.
    </div>

    <a id="tom-button" class="button" href="javascript:;">
        <img src="img/more-arrow.png">Read More
        <img src="img/more-arrow.png">
    </a>
</section> 


<section id="bob-box">
    <img class="image" src="img/bob.png" align="left">
    <h3>Person</h3>
    <h2>Description</h2>
    <article class="short">Lorem ipsum. This part automatically shows.</article>

    <div class="long">This part is hidden until clicked on Read More button.
    </div>

    <a id="bob-button" class="button" href="javascript:;">
        <img src="images/more-arrow.png">Read More
        <img src="images/more-arrow.png">
    </a>
</section>    

的jQuery

$(document).ready( function () {

function hidesections() {
    $("*[id*='-box'] .long").hide('medium');
};

function reset() {
    $("*[id*='-button']").html('<img src="images/more-arrow.png"> Read More <img src="images/more-arrow.png">');
};

$("*[id*='-read']").toggle(
    function() {
        $("*[id*='-box] .long").show('medium');
        reset();
        $("*[id*='-button']").html('<img src="images/less-arrow.png"> Read Less <img src="images/less-arrow.png">');
    }, function () {
        if ( $("*[id*='-box'] .long").css('display') == 'block')
        {
            hidesections();
            reset();
        }
        else {
            hidesections();
            reset();
            $("*[id*='-box'] .long").show('medium');
            $("*[id*='-button']").html('<img src="images/less-arrow.png"> Read Less <img src="images/less-arrow.png">');
        }   
});


})

2 个答案:

答案 0 :(得分:1)

我相信这是您想要的实施:http://jsfiddle.net/swm53ran/53/

HTML:

<section id="tom-box">
    <img class="image" src="img/tom.png" align="left"/>
    <h3>Person</h3>
    <h2>Description</h2>
    <article class="short">Lorem ipsum. This part automatically shows.</article>

    <div class="long">This part is hidden until clicked on Read More button.
    </div>

    <a class="button more" href="#">
        <img src="img/more-arrow.png"/> Read More <img src="img/more-arrow.png"/>
    </a>
    <a class="button less" href="#">
        <img src="images/less-arrow.png"/> Read Less <img src="images/less-arrow.png"/>
    </a>
</section> 

JS:

$(document).ready( function () {
    $('.more').on('click', function() {
        console.log('more clicked');
        $('.long').hide();
        $('.more').show();
        $('.less').hide();
        $(this).closest('section').find('.long').show();
        $(this).closest('section').find('.more').hide();       
        $(this).closest('section').find('.less').show();      
    });
    $('.less').on('click', function() {
        console.log('less clicked');
        $(this).closest('section').find('.long').hide();
       $(this).closest('section').find('.more').show();       
        $(this).closest('section').find('.less').hide();
    });
});

的CSS:

.long {
    display:none;
}
.less {
    display:none;
}

首先,就像其他人一样,你不能在页面上多次拥有相同的id,因此第一个改变就是改变id =&#34; image&#34;和id =&#34;短&#34; to class =&#34; image&#34;和class =&#34; short&#34;。

我添加的css只是为了确保没有长的div显示在开头。

已编辑以在答案中捕获整个问题范围(阅读较少的功能) 希望这有帮助

当点击更多类时,它会隐藏所有类长div和更少按钮,然后显示当前长div和更少按钮并隐藏自己的show more按钮。

另外,我添加了less按钮而不是通过jquery添加它。在按钮点击较少的情况下,它会隐藏自己较少的按钮及其长div并显示其更多按钮。

注意加载较少类的css,以便在加载页面时隐藏所有较少的按钮。

答案 1 :(得分:1)

这里有一个更简单的答案。基本的想法是你切换容器上的show-more类,然后你的css可以根据需要打开和关闭按钮和文本。

此外,如果你想要动画(滑出或其他),你可以轻松地将它们附加到css中的.show-more类内容。

&#13;
&#13;
$(document).ready( function () {
  $('.more, .less').on('click', function(ev) {
    ev.preventDefault();
    var currentSection = $(this).closest('section');
    $('section').not(currentSection).removeClass('show-more'); 
    $(this).closest('section').toggleClass('show-more')
  });
});
&#13;
.long {
    display:none;
}
.show-more .long {
    display:block;
}
.button.less {
    display: none;
}
.show-more .button.more {
    display:none;
}
.show-more .button.less {
    display:block;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="tom-box">
    <img class="image" src="img/tom.png" align="left"/>
    <h3>Person</h3>
    <h2>Description</h2>
    <article class="short">Lorem ipsum. This part automatically shows.</article>
    
    <div class="long">This part is hidden until clicked on Read More button.
    </div>
    
    <a class="button more" href="#">
        <img src="img/more-arrow.png"/> Read More <img src="img/more-arrow.png"/>
    </a>
    <a class="button less" href="#">
        <img src="images/less-arrow.png"/> Read Less <img src="images/less-arrow.png"/>
    </a>
</section> 


<section id="bob-box">
    <img class="image" src="img/bob.png" align="left"/>
    <h3>Person</h3>
    <h2>Description</h2>
    <article class="short">Lorem ipsum. This part automatically shows.</article>
    
    <div class="long">This part is hidden until clicked on Read More button.
    </div>
    
    <a class="button more" href="#">
        <img src="img/more-arrow.png"/> Read More <img src="img/more-arrow.png"/>
    </a>
    <a class="button less" href="#">
        <img src="images/less-arrow.png"/> Read Less <img src="images/less-arrow.png"/>
    </a>
</section>
&#13;
&#13;
&#13;