Question

我有一个包含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">');
        }   
});


})

Answer 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，以便在加载页面时隐藏所有较少的按钮。

Answer 2

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

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

＆＃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;

使用jQuery切换多个ID

2 个答案: