Question

我有一个页面，其中有四个内容，每个内容都有一个图像。现在，我的任务是让内容更大当用户点击特定内容时使用图像。另外，我需要隐藏所有其他内容。

像这是一个样本

此处每张图片都很小，内容也会被剪切掉。当用户点击图像时，我需要隐藏所有其他内容以及我需要使点击的内容显示为满，并使图像更大。像这样

为此，我正在做的是我正在加载一个类的所有内容，并点击我添加隐藏两个小内容的div 小图像，使其他更大的内容和图像可见。

此外，如果再次点击，我需要再次显示包含图像的所有小内容。

现在我的问题是我必须在这里编写特定的div id，这样才能使特定的id更大。我怎样才能使它更通用？

编辑：添加了代码

$($(this).find(".view-content")).click(function(){  

        if ( $( this ).hasClass( 'active' ) ) {
            $(this).removeClass('active');
                  $($(this).find(".Boardofadviser1")).show(); 
            $($(this).find(".Boardofadviser")).hide();

            $($(this).find(".views-row-3").show());



        }
        else
        {
           $(this).addClass('active');
           $($(this).find(".Boardofadviser1")).hide(); 
           $($(this).find(".Boardofadviser")).show();
            $($(this).find(".views-row-3").hide());
            $(".Boardofadviser1").nextAll().hide();
            $(".views-row-1.Boardofadviser1").hide();
           $(".views-row-1.Boardofadviser").show();

        }
         });

这是我的HTML页面，其中显示了所有小内容并隐藏了大量内容

Answer 1

为了避免使用额外的if / else条件来检查views-row是否包含active类，您必须使用$(this)上下文来告诉您想要这些类的哪个元素并显示图像在该特定类下，不影响click事件处理程序尚未调用的其他元素。

示例：

var oViewsRow = $('.view-content .views-row');        
oViewsRow.click(function(event) {
    event.preventDefault();

    // Call all DOM elements that have '.views-row' class
    oViewsRow.removeClass('active');
    oViewsRow.find(".Boardofadviser1").show();
    oViewsRow.find(".Boardofadviser").hide();
    oViewsRow.find(".views-row-3").show();

    $(".Boardofadviser1").nextAll().hide();
    $(".views-row-1.Boardofadviser1").hide();
    $(".views-row-1.Boardofadviser").show();

    // Then call that specific '.views-row' DOM element using $(this)
    $(this).addClass('active');
    $(this).find(".Boardofadviser1").hide();
    $(this).find(".Boardofadviser").show();
    $(this).find(".views-row-3").hide();
});

希望这有助于您的案例

Answer 2

您可以使用jQuery .toggle（）来显示/隐藏内容

＆＃13;

$(document).ready(function(){
  $('.small').on('click', function(event) {
    $('.small').parent().toggle('show');
    $(this).parent().next('div').toggle('show');
  })
  $('.big').on('click', function(event) {
    $(this).parent().toggle('show');
    $('.small').parent().toggle('show');
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div>
    <div>
      <span>Adviser1</span>
      <p>Blah Blah Blah</p>
      <img src="img1.png" width="100px" height="100px" class="small">
    </div>
    <div style="display:none;">   
      <span>Adviser1</span>
      <p>Blah Blah Blah Blah Blah Blah</p>
      <img src="img1.png" width="200px" height="200px" class="big">
    </div>
  </div>
  <div>
    <div>
      <span>Adviser2</span>
      <p>Blah Blah Blah</p>
      <img src="img2.png" width="100px" height="100px" class="small">
    </div>
    <div style="display:none;">   
      <span>Adviser2</span>
      <p>Blah Blah Blah Blah Blah Blah</p>
      <img src="img2.png" width="200px" height="200px" class="big">
    </div>
  </div>
</div>

＆＃13;

Codepen示例：https://codepen.io/anon/pen/VbbBwg

希望这有帮助！

点击一个div

2 个答案: