2

ULリストがあり、各LIには非表示のDIVがあり、非表示のDIVを表示する[詳細]リンクがあります。ただし、このボタンをクリックすると、他のすべてのLIの非表示のDIVも表示されます。

LIでDIVのみを非表示/表示し、他のすべての非表示DIVを表示しないようにするにはどうすればよいですか？

そして、1つをクリックした場合、他を非表示にするにはどうすればよいですか？後で削除したい場合に備えて、この部分は分けておきたいと思います。

また、クリックすると、[詳細]リンクのテキストが[非表示]に変更されます。

これが私の現在のスクリプトです：

$(window).load(function() {

$('.grey_button a').toggle(function() {
    $('.job_description').slideDown('');
    return false;
  },
    function() {
      $('.job_description').slideUp('');
    return false;
  });

});
4

8 に答える 8

2

次のjQueryが機能するはずです。

$('.grey_button a').toggle(function() {
    $(this).closest('li').find('.job_description').slideDown();
    return false;
  },
    function() {
      $(this).closest('li').find('.job_description').slideUp();
    return false;
  });

これは、次のようなHTMLを前提としています。

<ul>
    <li><span class="grey_button"><a href="#">Show more information</a></span>
        <div class="job_description">Job information...</div></li>
    <!-- other list items... -->
</ul>

JSフィドルデモ。

ちなみに、引数（整数（ミリ秒単位の数値）または文字列）を渡さずにslideUp()/に空の文字列を渡す必要はありません。代わりに、400ミリ秒のデフォルト値が使用されます。slideDown()

参照：

于 2012-05-04T07:42:45.260 に答える
2

Jquery：

      $('.grey_button a').click(function() {
           $(this).closest('li').find('.job_description').slideToggle();

       });

CSSはジョブ情報を最初に非表示にします：

     <ul>
       <li><span class="grey_button"><a href="#">Show more information</a></span>
      <div class="job_description" style="display:none" >Job information...</div></li>

    </ul>
于 2014-02-04T14:25:54.650 に答える
1

html構造がこのような場合::

<ul class="main">
   <li>
        <p class="important-info">Bala bala</p>
        <p class="more-info" style="display:none;">More bla bla</p>
        <a class="_show-more-info">More Information</a>
   </li>
   <li>
        <p class="important-info">Bala bala</p>
        <p class="more-info" style="display:none;">More bla bla</p>
        <a class="_show-more-info">More Information</a>
   </li>
<ul>

その場合、要件のJqueryコードは次のようになります

$('_show-more-info').click(function(){
    var thisAnchor = $(this);
    var ul = thisAnchor.parents('.main');
    ul.find('.more-info').slideUp();
    thisAnchor.sibling('.more-info').slideDown();
});
于 2012-05-04T08:05:19.253 に答える
1

このコードは実際のコンテンツを開き、他のすべてのコンテンツを非表示にします。

<style type="text/css">
.job_description { display: none; }

.grey_button.close span.hide,
.grey_button.open span.more { display: none; }

.grey_button.close span.more,
.grey_button.open span.hide { display: inline; }​
</style>
<script type="text/javascript" encoding="utf-8">
$(document).ready(function() {
    $('.grey_button.close').live('click', function() {
        $('.grey_button.open').click();
        $('.job_description').slideUp();
        $(this).siblings('.job_description').slideDown();
        $(this).toggleClass('close open');
        return false;
    });
    $('.grey_button.open').live('click', function() {
        $('.job_description').slideUp();
        $(this).toggleClass('close open');
        return false;
    });
});
</script>
<ul>
<li>short description
    <a class="grey_button close" href="#">
        <span class="more">read more</span>
        <span class="hide">hide</span></a>
    <div class="job_description">Here is more to read.</div>
</li>
<li>short description 
    <a class="grey_button close" href="#">
        <span class="more">read more</span>
        <span class="hide">hide</span></a>
    <div class="job_description">Here is more to read.</div>
</li>
<li>short description 
    <a class="grey_button close" href="#">
        <span class="more">read more</span>
        <span class="hide">hide</span></a>
    <div class="job_description">Here is more to read.</div>
</li>
<li>short description 
    <a class="grey_button close" href="#">
        <span class="more">read more</span>
        <span class="hide">hide</span></a>
    <div class="job_description">Here is more to read.</div>
</li>
</ul>​
于 2012-05-04T08:21:39.303 に答える
0

thisアクセス中はコンテキストを使用する必要がありますli 試してください

$(window).load(function() {

$('.grey_button a').toggle(function() {
    //hide the other 
    $('.grey_button a').not($(this)).find('.job_description').each(function(){
         $(this).slideUp();
    })

    $('.job_description',this).slideDown('');
    return false;
  },
    function() {
      $('.job_description',this).slideUp('');
    return false;
  });

});
于 2012-05-04T07:41:37.903 に答える
0

クラスを呼び出す.slideUp()と、それらすべてが非表示になり、$(this)キーワードを使用して、内のクラスのみをトリガーしliます。

試す：

$('.grey_button a').toggle(function() { $('.job_description').slideUp(); $(this).parent().find('.job_description').slideDown(); return false; }

于 2012-05-04T07:41:42.223 に答える
0

これを試して：

$(window).load(function() {

var $jobs = $('.job_description');
$('.grey_button a').click(function() {
    $closest = $(this).closest('li').find('.job_description');
    $jobs.not($closest).slideUp();
    $closest.slideDown();
    return false;
});

});
于 2012-05-04T07:44:27.927 に答える
0

ここでjsfiddleこの例を確認してください。

jquery機能の概要については...試してみてください：

$('.top').on('click', function() {
    $parent_box = $(this).closest('.box');
    $parent_box.siblings().find('.bottom').hide();
    $parent_box.find('.bottom').toggle();
});
于 2016-12-15T08:29:46.217 に答える