Question

我有这个http://jsfiddle.net/thiswolf/36HP7/2/小提琴，我试图隐藏一篇博文，只显示博客标题和预告片（摘录）。为此，我正在使用这种方式切换

$('.entire_blog_post').css('display','none');

$('.the_post_title').toggle(
  function(){
$('.the_post_teaser').css('display','none');
$('.entire_blog_post').css('display','');
  },
  function(){
$('.the_post_teaser').css('display','');
$('.entire_blog_post').css('display','none');
  }
);

我使用这个片段让它工作但是在这条路的某个地方，我被迫有一个专门的CSS课程。

$('.the_post_title').on('click',function(){
$('.the_post_teaser').css('display','none');
$('.entire_blog_post').css('display','');
});

如何使用toggle()

解决此问题

Answer 1

您可以创建一个或两个函数，如果您愿意，只需调用它

function showpost(){
   $('.the_post_teaser').hide();
   $('.entire_blog_post').show();
}

function hidepost(){
    $('.the_post_teaser').show();
    $('.entire_blog_post').hide();
}

然后是点击者

$('.the_post_title').click(function(){
    if($('.the_post_teaser').css('display') == 'block'){
        showpost();
    } else {
        hidepost();
    }
});

工作fiddle

Answer 2

请改为尝试：

$('.entire_blog_post').css('display','none');

$('.the_post_title').click( function() {
  $('.the_post_teaser').toggle();
  $('.entire_blog_post').toggle();
});

你也可以添加style =“display：none;”使用类'whole_blog_post'而不是使用js来添加该属性的div。

Answer 3

我设法在if if http://jsfiddle.net/thiswolf/wjfFb/1/

的帮助下解决了这个问题

$('.the_post_title').on('click', function(){
    if (!$(this).attr('data-toggled') || $(this).attr('data-toggled') == 'off'){

           $(this).attr('data-toggled','on');
           $('.the_post_teaser').css('display','none');
$('.entire_blog_post').css('display','');
    }
    else if ($(this).attr('data-toggled') == 'on'){
           $(this).attr('data-toggled','off');
           $('.the_post_teaser').css('display','');
$('.entire_blog_post').css('display','none');
    }
});

使用切换来隐藏和取消隐藏页面部分

3 个答案: