Question

所以我在Javascript，CSS，HTML，MySQL和PHP方面有一点业余爱好者级背景。我目前正在开设一个网站，其中包含一系列营业地点。

我已对其进行了设置，以便每个位置都列在一个页面上，并且该页面上有自己的＆＃39;联系人＆＃39;链接。联系人链接激活JS，修改可见的位置列表，让位于该组织的特定位置的联系人列表，从一侧开始。

这些联系人列表全部位于显示屏上：none，在后台，并有选择地设置为display：block，具体取决于主叫链接的ID。

每个联系人列表还应该有一个退出按钮，用于关闭该位置的联系人列表，然后单击任何其他位置的“联系人”链接，应该更新（替换）所显示的联系人列表。

我认为我应该有所作为，但我似乎错过了一些东西。问题是联系人只会显示第一个位置：Somerset。

我非常感谢解决这个问题的任何帮助:)

基本代码：

＆＃13;

function hideAll() {
  var i, curr, ar = ["people_Somerset", "people_Latrobe", "people_Hobart", "people_Smithton", "people_Launceston"];

  for (i = 0; i <= 4; i += 1) {
    curr = document.getElementById(ar[i]);
    if (curr.style.display === "block") {
      curr.style.display = "none";
    }

  }
}

function hideTitle() {
  document.getElementById("staff_h3").style.visibility = "hidden";
}

function showTitle() {
  document.getElementById("staff_h3").style.visibility = "visible";
}

function makeWay() {
  //Modify CSS to make room for selected contact list

  var selection, i, j;

  // Narrow location list to 50%

  selection = document.getElementsByClassName("left_column");
  j = selection.length;

  for (i = 0; i < j; i += 1) {
    selection[i].style.width = "50%";
  }

  //Modify div.location
  selection = document.querySelectorAll("div.location");
  j = selection.length;

  for (i = 0; i < j; i += 1) {
    selection[i].style.float = "none";
    selection[i].style.width = "100%";
  }

  //Change title width

  selection = document.querySelectorAll("h2.lefttitle");
  j = selection.length;

  for (i = 0; i < j; i += 1) {
    selection[i].style.width = "40%";
  }
}

function resetCSS() {

  var selection, j, i;

  // Reset location list to 100%
  selection = document.getElementsByClassName("left_column");
  j = selection.length;

  for (i = 0; i < j; i += 1) {
    selection[i].style.float = "left";
    selection[i].style.width = "100%";
  }

  // div.location narrows and floats to the left
  selection = document.querySelectorAll("div.location");
  j = selection.length;

  for (i = 0; i < j; i += 1) {
    selection[i].style.float = "left";
    selection[i].style.width = "50%";
  }

  //Change title width
  selection = document.querySelectorAll("h2.lefttitle");
  j = selection.length;

  for (i = 0; i < j; i += 1) {
    selection[i].style.width = "auto";
  }
}

function rolo(object) {

  var staff = document.getElementById("staff_h3"),
    currentElement = document.getElementById("people_" + object.id.substr(5, 12)),
    i, j;

  //If closing a staff list, hide it and reset CSS
  if (object.id === "close_rolo" || currentElement.style.display === "block") {
    hideAll();
    hideTitle();
    resetCSS();
  } else {
    // Change staff section title
    staff.innerHTML = "Our People: " + object.id.substr(5, 12);

    // Change CSS
    makeWay();

    // Set people section title to visible

    showTitle();

    // Depending on Contacts link, display the appropriate block of people
    hideAll();
    currentElement.style.display = "block";
  }

}

＆＃13;

#locations {
  margin-left: 1em;
  margin-right: 1em;
}
h2.lefttitle {
  padding-bottom: 0em;
  margin: 0;
}
#staff_h3 {
  float: left;
  width: 90%;
}
h2.righttitle {
  text-align: right;
}
#exit {
  float: right;
  width: 2em;
  height: 2em;
  margin-top: -3em;
  margin-left: 3em;
}
.display_none {
  display: none;
}
.hidden {
  visibility: hidden;
}
p.quote {
  margin-bottom: 0em;
}
h3.location {
  margin-top: 0;
  margin-bottom: 0.5em;
}
div.location ul {
  list-style-type: none;
  margin-top: 0em;
  padding-top: 0em;
}
div.location {
  width: 50%;
  float: left;
  height: 19em;
}
div.column {
  width: 100%;
  height: 100%;
}
.left_column {
  float: left;
  width: 100%;
}
.right_column {
  float: right;
  width: 50%;
}
img.location {
  width: 40%;
  float: left;
  padding-right: 1em;
}
div.staff_container {
  position: relative;
  background: white;
}
div.stafflist {
  position: relative;
  top: 0;
  left: 0;
}
div.person {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  height: 6em;
}
h4.person {
  display: inline;
  margin: 0;
}
div.subtitle {
  width: 100%;
  clear: both;
}

＆＃13;

<script type="text/javascript" src="js/showdiv.js"></script>
<link rel="stylesheet" href="CSS/locations.css" type="text/css" />

<div id='locations'>
  <div class='left_column'>
    <h2 class='lefttitle'>Our Locations</h2>

    <div class='location'>
      <img class='location' src='img/locations/somerset.jpg' title='Somerset' />

      <ul>
        <li>
          <h3 class='location'>Somerset</h3>
        </li>
        <li>5 Reece Court
          <br/>Somerset</li>
        <br/>
        <li><a id="rolo_Somerset" onclick='rolo(this);return false;'>Contacts</a>
        </li>
      </ul>
    </div>

    <div class='location'>
      <img class='location' src='img/locations/latrobe.png' title='Latrobe' />

      <ul>
        <li>
          <h3 class='location'>Latrobe</h3>
        </li>
        <li>3 Speedway Drive
          <br/>Latrobe</li>
        <br/>
        <li><a id="rolo_Latrobe" onclick='rolo(this);return false;'>Contacts</a>
        </li>
      </ul>
    </div>

    <div class='location'>
      <img class='location' src='img/locations/launnie.png' title='Launceston' />

      <ul>
        <li>
          <h3 class='location'>Launceston</h3>
        </li>
        <li>379 Westbury Road
          <br/>Prospect</li>
        <br/>
        <li><a id="rolo_Launceston" onclick='rolo(this);return false;'>Contacts</a>
        </li>
      </ul>
    </div>

    <div class='location'>
      <img class='location' src='img/locations/smithton.png' title='Smithton' />

      <ul>
        <li>
          <h3 class='location'>Smithton</h3>
        </li>
        <li>116 Nelson Street
          <br/>Smithton</li>
        <br/>
        <li><a id="rolo_Smithton" onclick='rolo(this);return false;'>Contacts</a>
        </li>
      </ul>
    </div>

    <div class='location'>
      <img class='location' src='img/locations/hobart.jpg' title='Hobart' />

      <ul>
        <li>
          <h3 class='location'>Hobart</h3>
        </li>
        <li>43 Derwent Park Road
          <br/>Derwent Park</li>
        <br/>
        <li><a id="rolo_Hobart" onclick='rolo(this);return false;'>Contacts</a>
        </li>
      </ul>
    </div>
  </div>
  <div class='right_column staff_container'>
    <h3 id='staff_h3' class='hidden lefttitle'>Our People</h3>
    <div id='people_Somerset' class='display_none location stafflist'>
      <a id='close_rolo' onclick='rolo(this);return false;'>
        <img id='exit' src='img/icons/exit.gif' title='Close Rolodex' />
      </a>
      <div class='left_column'>
        <!--First result-->

        <div class='person'>
          Somerset person one
        </div>
        <!-- Close person -->
      </div>
      <!-- Close column -->
      <div class='right_column'>
        <div class='person'>
          Somerset person two
        </div>
        <!-- Close person -->
      </div>
      <!-- Close column -->

      <div id='people_Latrobe' class='display_none location stafflist'>
        <a id='close_rolo' onclick='rolo(this);return false;'>
          <img id='exit' src='img/icons/exit.gif' title='Close Rolodex' />
        </a>
        <div class='left_column'>
          <!--First result-->

          <div class='person'>
            Latrobe person one
          </div>
          <!-- Close person -->
        </div>
        <!-- Close column -->
        <div class='right_column'>
          <div class='person'>
            Latrobe person two
          </div>
          <!-- Close person -->
        </div>
        <!-- Close column -->


        <div id='people_Launceston' class='display_none location stafflist'>
          <a id='close_rolo' onclick='rolo(this);return false;'>
            <img id='exit' src='img/icons/exit.gif' title='Close Rolodex' />
          </a>
          <div class='left_column'>
            <!--First result-->

            <div class='person'>
              Launceston person one
            </div>
            <!-- Close person -->
          </div>
          <!-- Close column -->
          <div class='right_column'>
            <div class='person'>
              Launceston person two
            </div>
            <!-- Close person -->
          </div>
          <!-- Close column -->

          <div id='people_Smithton' class='display_none location stafflist'>
            <a id='close_rolo' onclick='rolo(this);return false;'>
              <img id='exit' src='img/icons/exit.gif' title='Close Rolodex' />
            </a>
            <div class='person'>
              Smithton person one
            </div>
            <!-- Close person -->
          </div>
          <!-- Close column -->
          <div class='right_column'>
            <div class='person'>
              Smithton person two
            </div>
            <!-- Close person -->
          </div>
          <!-- Close column -->


          <div id='people_Hobart' class='display_none location stafflist'>
            <a id='close_rolo' onclick='rolo(this);return false;'>
              <img id='exit' src='img/icons/exit.gif' title='Close Rolodex' />
            </a>
            <div class='left_column'>
              <!--First result-->

              <div class='person'>
                Hobart person one
              </div>
              <!-- Close person -->
            </div>
            <!-- Close column -->
            <div class='right_column'>
              <div class='person'>
                Hobart person two
              </div>
              <!-- Close person -->
            </div>
            <!-- Close column -->


          </div>
          <!-- Close people_whatever -->
        </div>
        <!-- close outer right column -->
      </div>
      <!-- close locations -->

＆＃13;

Answer 1

免责声明：以下代码段未在浏览器中测试过。我记得我之前是如何做过类似的用户界面的。

我建议在HTML中将每个位置的联系人绑在一起。然后对包含位置使用简单的active类或类似内容，以下规则将显示相应的联系人：

.location {
    /* positioning and such for non-selected locations */
    width: 50%;
    float: left;
}

.location > .contacts {
    display: none;
}

.location.active {
    /* positioning and such for an active (selected) locations */
    width: 100%;
    clear: both;
}

.location.active > .contacts {
    display: block;
}

在JavaScript中，您可以使用

切换所选位置

var contact_display_buttons = document.querySelectorAll( '.contact-button' );

// You can extract this inline anonymous function in case you need to use it elsewhere.
contact_display_buttons.addEventListener( 'click', function( evt ) {
    evt.preventDefault();

    var clicked_btn = evt.target;

    // If you need to close all contact lists before showing another, uncomment:
    /*
    var all_locations = document.querySelectorAll( '#locations .location' );
    all_locations.classList.remove( 'active' );
    */

    var parent = clicked_btn.parentElement;

    // Get the containing location element.
    while ( ! parent.classList.contains( 'location' ) && parent !== undefined ) {
        parent = parent.parentElement;
    }

    if ( parent !== undefined ) {
        parent.classList.toggle( 'active' );
    }
}, false );

classList可能未在所有浏览器中正确实施，但有可用的polyfill。 addEventListener可能需要替代旧版IE等。

基础HTML结构可能如下：

<div id="locations">
    <div class="location">
        <div class="location-info">
            ...
            <button class="contact-button">Show contacts</button>
        </div>
        <div class="contacts">
            <ul>
                ...
            </ul>
        </div>
    </div>
    <div class="location">
        ...
    </div>
    ...
</div>

现在，如果有人点击.contact-button元素中的.location元素，.location的直接子.contacts将以切换方式显示和隐藏

如果需要，可以添加一些CSS动画。 JS动画需要在上面的JS片段中的click处理程序中进行一些工作。

通过javascript选择性显示div

1 个答案: