Question

对于每个困境/问题我都有一排，问题旁边有一个图像按钮。当我单击按钮时，问题下方会出现特定问题的答案。答案是隐藏的，直到我点击按钮显示它们。但是，在我点击问题按钮之前，列出的所有问题都没有显示答案。

我想解决的问题是问题之间存在太多空间，我认为原因是隐藏文本介于它们之间。我想解决一下，当没有人点击时，问题行之间没有太多空间，然后在点击的问题下面显示答案文字。点击后它已经在问题下面显示了答案，但我想在没有点击时删除大空间。问题是我在问题和答案之间甚至没有任何<br>，并且可能因为隐藏的文本而存在很大的空间。

我必须添加到CSS吗？我告诉你我有什么。

 <style> 
  .question-wrap {
   margin-bottom: 2em
  }
  p.answer {
    display: none
  }
 </style>

  <script>
        $(document).ready(function(){
        $(".answer-toggle").click(function(){
            $(this).closest('.question-wrap').find('.answer').toggle();
            });
        });
  </script>

    echo "<div class='question-wrap'><b><small>Dilemma ".$row['qid']." - Svar ". $row['aid'].":</small></b> ". $row['points']." av 10 <b><small>Poäng</small></b>
    <button class='answer-toggle'><input type='image' title='Information' src='img/down.png' width='13' height='10'></button>
    <p class='answer'>This is a paragraph with little content.</p></div>
    <br>";

Answer 1

您的JavaScript或HTML没有任何问题，但您的CSS有一个非常明显的问题。

每个问题都有margin-bottom: 2em; ，每个问题/答案对之间都有一个<br>。所有这些间距实际上都在增加，所以要删除间距，

删除margin-bottom声明。

或

删除<br>代码并将margin-bottom更改为0.5em。

我建议使用 second 选项，因为CSS应该负责样式，而不是HTML。

$(document).ready(function() { $(".answer-toggle").click(function() { $(this).closest('.question-wrap').find('.answer').toggle(); }); });

.question-wrap { margin-bottom: 0.5em; /* Change this to what you want */ } p.answer { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='question-wrap'> <b>Question 1</b> <button class='answer-toggle'>Show Answer</button> <p class='answer'>Answer 1</p> </div> <div class='question-wrap'> <b>Question 2</b> <button class='answer-toggle'>Show Answer</button> <p class='answer'>Answer 2</p> </div> <div class='question-wrap'> <b>Question 3</b> <button class='answer-toggle'>Show Answer</button> <p class='answer'>Answer 3</p> </div>

删除行之间的空格

1 个答案: