jQuery：如何在内部制作对象 <div> 隐藏或显示点击？

Question

I want to make a webpage in which three different contents show/hide when a button is clicked. 我想制作一个网页，单击一个按钮时会显示/隐藏三个不同的内容。 The code is shown below. 代码如下所示。

I want the same page to show three contents: 我希望同一页面显示三个内容：

only a search bar when button 'search' is clicked, 单击“搜索”按钮时只有一个搜索栏，
only the result of the search after a search is done or when the button 'results' is clicked, and 仅在搜索完成后或单击“结果”按钮时的搜索结果，并且
only the visualization of the search when one specific outcome of the results is chosen, or when the button 'visualization' is clicked. 选择结果的一个特定结果时，或单击按钮“可视化”时，仅显示搜索的可视化。

Right now I only know how to show the results in different pages, not in the same one hiding what I don't want. 现在，我只知道如何在不同的页面中显示结果，而不是在同一页面中隐藏不需要的结果。

Code is below. 代码如下。

Thanks 谢谢

<html lang="en">
<head>

  <title>Test</title>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">

  <link rel="shortcut icon" href="docs-assets/ico/favicon.png">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/bootstrap-theme.min.css">
  <link href="css/jumbotron-narrow.css" rel="stylesheet">
  <link href="css/jquery.dataTables.css" rel="stylesheet">
  <link rel="shortcut icon" type="image/ico" href="" />

  <script src="js/jquery-1.10.2.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script type="text/javascript" language="javascript" src="js/libs/jquery-2.0.3.min.js"></script>
  <script type="text/javascript" language="javascript" src="js/libs/jquery.sprintf.js"></script>
  <script type="text/javascript" language="javascript" src="js/libs/jquery.dataTables.min.js"></script>

  <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
      //xmakeTable("treaty");
    });

    makeTable = function(query) {
      var q = encodeURIComponent(query)
      $('#example').dataTable({
        "oLanguage": {"sSearch": "Filter results:"},
        "bProcessing": true,
        "bDestroy":true,
        "sAjaxSource": $.sprintf('http://leela.sscnet.ucla.edu/voteview/searchdt?q=%s',q),
        "aoColumns":[{"mData":"id", "sWidth": "20px", "sTitle":"ID"},
          {"mData":"chamber", "sWidth": "10px", "sTitle":"Chamber"},
          {"mData":"date", "sWidth": "85px", "sTitle":"Date"},
          {"mData":"yea","sTitle":"Vote","sWidth":"80px"},
          {"mData":"descriptionShort", "sWidth": "200px","sTitle":"Description"}],
        "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
          $('td:eq(0)', nRow).html(
          $.sprintf('<a href="http://leela.sscnet.ucla.edu/newmap/index.html?id=%s">%s</a>',aData['id'],aData['id'])).attr("title","Click to explore this vote");
          $('td:eq(3)', nRow).html(
          $.sprintf('%s-%s',aData['yea'],aData['no']));
          $('td:eq(4)', nRow).attr("title",aData['description'])
          return nRow; }
      });
    }

    searchvotes = function() {
      $('#example').empty();
      makeTable($('#qqtext').val());
    };

  </script>

</head>

<body>

<div class="container">
  <div class="header">
    <ul class="nav nav-pills pull-right">
      <li><a href="home.html">Home</a></li>
      <li class="active"><a href="search.html">Search</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <h3 class="text-muted">VoteView</h3>
  </div>

  <div class="jumbotron">
    <div class="container">

      <div>
        <h3 align="center">Search for Roll Calls</h3>
        <div class="col-sm-12">
          <input type="search" class="form-control" placeholder="Search" id="qqtext" onchange="searchvotes()"></input>
        </div>
      </div>
      <br>
      <div>
        <div class="table-responsive">
          <table id="example" class="table table-striped"></table>
        </div>
      </div>

      <div>
        <div class="col-lg-14 col-md-14 portfolio-item" id="example">
        </div>
      </div>

    </div>
  </div>


  <div align="center">
    <button type="button" class="btn btn-primary btn-lg">
      <span class="glyphicon glyphicon-search"></span><br><a href="search.html"><font color="white">Search</font></a>
    </button>

    <button type="button" class="btn btn-success btn-lg">
      <span class="glyphicon glyphicon-list"></span><br><a href="results.html"><font color="white">Results</font></a>
    </button>

    <button type="button" class="btn btn-warning btn-lg">
      <span class="glyphicon glyphicon-eye-open"></span><br><a href="results.html"><font color="white">Visualize</font></a>
    </button>
  </div>
  <br>



  <hr>

  <p></p>

  <footer>
    <p>Example</p>
  </footer>
</div>


</body>
</html>

If one tries a search with this code, the code should show results, but not the way I expect. 如果尝试使用此代码进行搜索，则该代码应显示结果，而不是我期望的结果。

Thanks 谢谢

Answer 1

Probably not the solution but some hint to get there. 可能不是解决方案，但有一些提示。 Given this: 鉴于这种：

    <ul>
           <li class="collapsable"><h2>Release 3.0</h2>
        <ul>

            <li><h3>Allgemeine Übersicht</h3>
                <p>Text ....
            </li>

        </ul>

    </li>
    ....
    </ul>

I do: 我做：

<script type="text/javascript">
jQuery(document).ready( function () {

    jQuery('.collapsable').click(function () {
        jQuery(this).children('ul').first().toggle("slow");
    });

});
</script>

And 和

<style>
li.collapsable ul {
display: none;
}
</style>

A Click on the headline opens the <ul> and closes it again on next click (Actually, there is a lot of text in there and thus the list is very long) 单击标题会打开<ul> ，然后在下次单击时再次将其关闭（实际上，其中有很多文本，因此列表很长）

Answer 2

Firstly add an Id to your buttons to make things a bit easier 首先，向您的按钮添加一个ID，以使事情变得简单一些

<button id="btnSearch" type="button" class="btn btn-warning btn-lg" />
<button id="btnResult" type="button" class="btn btn-warning btn-lg" />
<button id="btnVisual" type="button" class="btn btn-warning btn-lg" />

then make sure that you have the three mark-up sections on the page wrapped inside it's own div with an Id on each div. 然后确保页面上的三个标记部分都包装在其自己的div中，每个div上都有一个ID。

<div id="search">
    ...
</div>

<div id="result">
    ...
</div>

<div id="visual">
    ...
</div>

In your JavaScript, set-up page for the initial conditions and handle the clicks on the buttons as required. 在JavaScript中，设置初始条件的页面，并根据需要处理按钮的单击。 In your search and visualisation functions just show and hide the appropriate div(s) for the conditions your require using JQuery's show() and hide() functions. 在搜索和可视化功能中，只需使用JQuery的show（）和hide（）函数显示和隐藏适合您所需要条件的div。

It may go something like this - just tweaks this snippet as required, to suit your actual scenario. 可能会发生类似的情况-仅根据需要调整此代码段，以适合您的实际情况。

function reset() {
    $('#search').show();  
    $('#result').hide();
    $('#visual').hide();
}

function init() {

    var self = this;

    // button clicks 
    $('#search').click(function () {
        self.reset(); 
    });

    $('#results').click(function () {
        self.search();  
    });

    $('#visual').click(function () {
        self.visualize();  
    });
}

function search() {

    // Do search and set results table contents

    $('#search').hide();
    $('#result').show();
} 

function visualize() {

    // Do visualisation and set content

    $('#result').hide();
    $('#visual').show();
} 

$(document).ready( function () {
   this.reset();
   this.init(); 
)};

Answer 3

You need to use toggle() It will hide element if its current status is visible and show if it is currently hidden: 您需要使用toggle（）如果当前状态可见，它将隐藏元素，并显示当前是否隐藏：

$('.collapsable').click(function () {
     $(this).children('ul').first().toggle();
});

jQuery：如何在内部制作对象 <div> 隐藏或显示点击？

问题描述

3 个解决方案

解决方案1
0 2013-12-15 07:45:30

解决方案2
0 2013-12-15 08:15:12

解决方案3
0 2013-12-15 08:35:29

jQuery：如何在内部制作对象 <div> 隐藏或显示点击？

问题描述

3 个解决方案

解决方案1 0 2013-12-15 07:45:30

解决方案2 0 2013-12-15 08:15:12

解决方案3 0 2013-12-15 08:35:29

解决方案1
0 2013-12-15 07:45:30

解决方案2
0 2013-12-15 08:15:12

解决方案3
0 2013-12-15 08:35:29