Question

我创建了一个页面（http://www.nextsteptutoring.co.uk/WhatWeTeach.html），其中包含4个可选的h3元素，可以显示有关该主题的更多文本供用户阅读。

第一个元素完美无缺 - 整个元素是可选择的。第二个和第三个可部分选择，可以单击+和第一个字母。根本无法点击第4个。

JS工作正常，我的CSS看起来很好，正如第1工作正常显示的那样，第2和第3部分正常。我无法看到这可能是一个z-inex，因为页面上唯一具有z-index值的元素是页脚，它也可以很好地加载。

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=windows-1252" http-equiv="content-type">
    <link href="http://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
  <link href="http://fonts.googleapis.com/css?family=Cabin+Condensed" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="Main.CSS">
    <title>NST | What We Teach</title>
  </head>
  <body>
    <div class="container">
    <header> </header>
    <div class="leftcolumn">
      <h2>What We Teach</h2>
      <p> Clear schemes of work, linked to the National Curriculum, which 
      are individually tailored to your child’s needs. We offer one to one          
      sessions, or small groups, with a maximum of 4 children. Groups are          
       based on specific needs/ability, rather than on chronological age.<br/>
      <br/>
      Programmes of study are adapted for high achievers in need of a
      challenge, as well as those who lack confidence or require additional
      support, outside of mainstream education.<br/>
      </p>
    </div>
    <div class="rightcolumn">
      <div class="hide">
        <h3>+ Primary Maths</h3>
        <ul>
          <li>The four rules of number</li>
          <li>Focus on Mental Arithmetic</li>
          <li>Multiplication and associated division facts</li>
          <li>Fractions, decimals and percentages</li>
          <li>Data Handling, measures, and shapes</li>
          <li>Algebra</li>
          <li>Using and applying mathematical skills in everyday problem
            solving</li>
          <li>Confidence building and catch-up</li>
        </ul>
      </div>
      <div class="hide">
        <h3>+ Primary English</h3>
        <ul>
          <li>Clear focus on comprehension. Building skills of inference and
            reasoning</li>
          <li>Individually tailored spelling programme (specialised dyslexia
            spelling programme)</li>
          <li>Grammar and punctuation</li>
          <li>Writing for different purposes and audiences</li>
          <li>Handwriting</li>
          <li>Confidence building and catch-up</li>
        </ul>
      </div>
      <div class="hide">
        <h3>+ Year 6 to Year 7 Transition</h3>
        <p>Tailored English and Maths programme to support youngsters who 
          lack confidence during their transition from Primary to Secondary
          education.</p>
      </div>
      <div class="hide">
        <h3>+ Written Reports</h3>
        <p>Parents may wish to receive a termly or yearly written report on
          their child’s progress, and targets for the next phase of their
          learning. This service will incur a fee of £10.</p>
      </div>
    </div>
    <footer> </footer>
  </div>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $("header").load("Header.txt");
    });
    $(document).ready(function(){
      $("footer").load("Footer.txt");
    });
    $(".hide > h3").click(function(){ 
      $(this).parent().toggleClass("show");
    });
    $(".show > h3").click(function(){
      $(this).parent().toggleClass("hide");
    }); 
  </script>
</body>
</html>


footer {
   position: fixed;
   width: 100%;
   bottom: 0;
   left: 0;
   background: rgba(150,150,150,1);
   color: white;
   text-align: center;
   z-index: 5;
}
footer .container div {
   display: inline-block;
   padding: 5px 30px 2px 30px;
}
#contact {
   background: rgba(120,117,185,1);
   float: right;
   padding: 5px 100px 2px 100px;
}
.hide h3 {
   width: 100%;
   background: rgba(171,167,242,0.75);
   border-radius: 5px;
   cursor: pointer;
   padding: 2px 0 2px 8px;
}
.hide p, .hide ul {
   opacity: 0;
   height: 0;
}
.show {
   height: auto;
}
.show p, .show ul {
   opacity: 1;
   list-style-type: square;
   height: auto;
   font-size: 18px;
}

任何想法都将不胜感激!!

Answer 1

问题是css。

添加：

.hide p, .hide ul {
  opacity: 0;
  height: 0;
  overflow: hidden;
}

li元素与按钮重叠。所以请overflow: hidden给ul，他们会hidden正确地获得@ORM\ManyToOne(targetEntity="Users")而不影响其余部分。

Answer 2

<强> CSS

.hide h3 {
  padding: 2px 0 2px 10px;
  width: 97%;
  background: rgba(171,167,242,0.75);
  border-radius: 5px;
  cursor: pointer;
  position: relative;
}

将position:relative CSS属性添加到.hide h3它可以正常工作。

无法使用javascript选择html元素

2 个答案: