为啥我的切换不显示？以及如何切换到侧面？

Posted 2023-02-25

【中文标题】为啥我的切换不显示？以及如何切换到侧面？

【英文标题】：Why does my toggle do not show up? and how to toggle to the side?为什么我的切换不显示？以及如何切换到侧面？

【发布时间】：2021-04-08 13:31:36

【问题描述】：

我的幻灯片切换不会显示？我已经做到了，所以当你点击 id 时，会出现文本 id。但不知何故它没有连接？好像text id一直在后面，但是我看不下去了？ 我也想知道如何让它切换到侧面而不是向下？

有人可以帮忙吗？谢谢

$(document).ready(function() 
  $("#Introduction_click").click(function() 
    $("#Introduction_text").slideToggle("slow")
  )
  
  $("#Toggle2_click").click(function() 
    $("#Toggle2_text").slideToggle("slow")
  )
)

.container 
  padding-left: 00px;
  padding-bottom: 55px;
  box-sizing: border-box;
  cursor: pointer;
  background-color: yellow;


.title 
  padding-top: 20px;
  font-family: 'RimaRegular';
  font-weight: 800;
  font-style: normal;
  font-size: 18px;
  line-height: 21.5px;
  background-color: blue;
  border-radius: 25px;
  /*  margin-top:10px;*/
  margin-top: 5px;
  margin-right: 5vw;
  height: 100%;


h1 
  font-family: 'Till-Normal';
  font-weight: 900;
  font-style: normal;
  font-size: 30px;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  text-align: center;


.paragraph 
  margin-right: 10vw;


p 
  /*  margin-left:30px;*/
  margin-left: 20px;
  /* text-indent: 30px; */
  font-family: 'RimaRegular';
  font-weight: 400;
  font-style: normal;
  font-size: 15px;
  line-height: 20.5px;
  -webkit-font-smoothing: antialiased;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  /*  text-align: justify;*/
  text-justify: inter-word;
  overflow-wrap: break-word;


#Introduction_click 
  height: 100%;
  margin-left: 0vw;
  margin-top: 10px;


#Introduction_text 
  display: none;
  margin-top: 0px;


#Toggle2_click 
  height: 100%;
  margin-left: 0vw;
  margin-top: 10px;


#Toggle2_text 
  display: none;
  margin-top: 0px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">


  <div id="Introduction_click">
    <div class="title">
      <h1>Introduction</h1>
      <br>
      <div id="Introduction_text">
        <div class="paragraph">
          <br>
          <p>hallo text here</p>
        </div>
      </div>
    </div>

    <div id="Toggle2_click">
      <div class="title">
        <h1>Toggle 2</h1>
        <br>
        <div id="Toggle2_text">
          <div class="paragraph">
            <br>
            <p>hallo text here</p>
          </div>
        </div>
      </div>

【参考方案1】：

我发现了问题。 这是因为#introduction_click 没有关闭并包含整个容器。 所以我在#Toggle2_click 之前添加了</div>。 现在可以了。

$(document).ready(function() 
  $("#Introduction_click").click(function() 
    $("#Introduction_text").slideToggle("slow");
  );
);

$(document).ready(function() 
  $("#Toggle2_click").click(function() 
    $("#Toggle2_text").slideToggle("slow");
  );
);

.container 
  padding-left: 00px;
  padding-bottom: 55px;
  box-sizing: border-box;
  cursor: pointer;
  background-color: yellow;


.title 
  padding-top: 20px;
  font-family: 'RimaRegular';
  font-weight: 800;
  font-style: normal;
  font-size: 18px;
  line-height: 21.5px;
  background-color: blue;
  border-radius: 25px;
  /*  margin-top:10px;*/
  margin-top: 5px;
  margin-right: 5vw;
  height: 100%;


h1 
  font-family: 'Till-Normal';
  font-weight: 900;
  font-style: normal;
  font-size: 30px;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  text-align: center;


.paragraph 
  margin-right: 10vw;


p 
  /*  margin-left:30px;*/
  margin-left: 20px;
  /* text-indent: 30px; */
  font-family: 'RimaRegular';
  font-weight: 400;
  font-style: normal;
  font-size: 15px;
  line-height: 20.5px;
  -webkit-font-smoothing: antialiased;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  /*  text-align: justify;*/
  text-justify: inter-word;
  overflow-wrap: break-word;


#Introduction_click 
  margin-left: 0vw;
  margin-top: 10px;


#Introduction_text 
  display: none;
  margin-top: 0px;


#Toggle2_click 
  height: 100%;
  margin-left: 0vw;
  margin-top: 10px;


#Toggle2_text 
  display: none;
  margin-top: 0px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">


  <div id="Introduction_click">
    <div class="title">
      <h1>Introduction</h1>
      <br>
      <div id="Introduction_text">
        <div class="paragraph">
          <br>
          <p>hallo text here</p>
        </div>
      </div>
    </div>
    </div>

    <div id="Toggle2_click">
      <div class="title">
        <h1>Toggle 2</h1>
        <br>
        <div id="Toggle2_text">
          <div class="paragraph">
            <br>
            <p>hallo text here</p>
          </div>
        </div>
      </div>

【讨论】：

哦，谢谢！那个小家伙... ;-) - 你也知道如何让滑到一边而不是滑下来吗？

请看这个链接。 ***.com/questions/39699416/…

【参考方案2】：

我想你忘记添加 Jquery 库了 在你的脚本点击事件之前添加这个

 <script src="https://code.jquery.com/jquery-3.5.0.js"></script>

【讨论】：

问题不是这个。