Question

这是我的问题：我有一个图像滑块拒绝实际滑动。我花了最近两个小时在这里浏览答案，并看着JSFiddles。似乎没有任何帮助。

这是我的问题：我在div中包含一个HTML表，下面给出了属性。单击顶部的按钮时，滑块（带有id＆＃34;滑块＆＃34;的div）应通过幻灯片动画切换。但相反，它会在没有动画的情况下显示或消失！

我确定它有一个高度和宽度，以及各种答案所说的其他所需的一切（尽管如果我没有必要在px中定义高度和宽度，那么让它扩展或合同无论大小，它都需要，很棒）。但是还没有动画！它消失了！

请帮忙！

此外，大多数HTML都是您可以忽略的表。刚开始和结束都很重要。

<h2><strong>SPRING CONVENTION SCHEDULE OF EVENTS</strong></h2>
<br>
<button id="toggleSwitch" onClick="toggleFlipFlop();">Click here to show table</button>

<!--table for Friday events-->
<div id = "slider" class="hidden">
<table id="friday-table">
<tbody>
<tr>
<th colspan="2"><strong>SCHEDULE OF EVENTS FOR FRIDAY, MARCH 31</strong></th>
</tr>
<tr>
<td>3:45 - 5:00</td>
<td>CONVENTION REGISTRATION</td>
</tr>
<tr>
<td>4:30 - 5:15</td>
<td>GRAPHIC ARTS REGISTRATION</td>
</tr>
<tr>
<td>4:30 - 4:50</td>
<td>CANDIDATES MEETING</td>
</tr>
<tr>
<td>5:15 - 5:25</td>
<td>SPIRIT COMPETITION</td>
</tr>
<tr>
<td>5:25 - 6:00</td>
<td>GENERAL ASSEMBLY</td>
</tr>
<tr>
<td>7:00 - 9:00</td>
<td>COSTUME CONTEST</td>
</tr>
<tr>
<td>7:30 - 9:00</td>
<td>SKIT CONTEST</td>
</tr>
<tr>
<td>7:15 - 8:00</td>
<td>ESSAY CONTEST</td>
</tr>
<tr>
<td>8:00 - 8:30</td>
<td>IMPROMPTU ART</td>
</tr>
<tr>
<td>8:00 - 9:30</td>
<td>SERVICE PROJECT</td>
</tr>
<tr>
<td>8:00 - 9:30</td>
<td>BOARD GAMES</td>
</tr>
</tbody>
</table>
<!--table for Saturday events-->
<table id="saturday-table">
<tbody>
<tr>
<th colspan="2"><strong>SCHEDULE OF EVENTS FOR SATURDAY, APRIL 1</strong></th>
</tr>
<tr>
<td>8:00 - 9:00</td>
<td>SCRAPBOOK CHECK-IN</td>
</tr>
<tr>
<td>8:00 - 9:00</td>
<td>GRAPHIC ARTS</td>
</tr>
<tr>
<td>8:15 - 8:45</td>
<td>CONVENTION REGISTRATION AND SATURDAY CHECK-IN</td>
</tr>
<tr>
<td>9:00 - 10:00</td>
<td>ACADEMIC TESTING (all levels)</td>
</tr>
<tr>
<td>10:15 - 10:45</td>
<td>SEMINAR SESSION I</td>
</tr>
<tr>
<td>10:30 - 12:30</td>
<td>DRAMATIC INTERPRETATION</td>
</tr>
<tr>
<td>10:30 - 11:00</td>
<td>MIDDLE SCHOOL CERTAMEN FINALS</td>
</tr>
<tr>
<td>11:00 - 11:30</td>
<td>SEMINAR SESSION II</td>
</tr>
<tr>
<td>11:00 - 11:30</td>
<td>ADVANCED CERTAMEN FINALS</td>
</tr>
<tr>
<td>11:30 - 12:00</td>
<td>INTERMEDIATE CERTAMEN FINALS</td>
</tr>
<tr>
<td>12:00 - 12:30</td>
<td>NOVICE CERTAMEN FINALS</td>
</tr>
<tr>
<td>12:30 - 3:00</td>
<td>GRAPHIC ARTS VIEWING</td>
</tr>
<tr>
<td>12:45 - 1:30</td>
<td>"MEET THE CANDIDATES" MEETING</td>
</tr>
<tr>
<td>1:00 - 2:30</td>
<td>LATIN SIGHT READING</td>
</tr>
<tr>
<td>1:00 - 2:30</td>
<td>ENGLISH ORATORY</td>
</tr>
<tr>
<td>1:00 - 2:30</td>
<td>OPEN CERTAMEN</td>
</tr>
<tr>
<td>1:30 - 2:30</td>
<td>OLYMPIKA I</td>
</tr>
<tr>
<td>2:00</td>
<td>VOTING BALLOTS DUE</td>
</tr>
<tr>
<td>3:00 - 4:00</td>
<td>OLYMPIKA II</td>
</tr>
<tr>
<td>3:00 - 3:30</td>
<td>CHARIOT RACING AND CATAPULT</td>
</tr>
<tr>
<td>3:00 - 3:30</td>
<td>GRAPHIC ARTS PICKUP</td>
</tr>
<tr>
<td>4:20 - 4:30</td>
<td>SPIRIT COMPETITION</td>
</tr>
<tr>
<td>4:30 - 5:00</td>
<td>CLOSING GENERAL ASSEMBLY</td>
</tr>
</tbody>
</table>
</div>

我的CSS：

#slider{
height: 1530px;
width: 524.317px;
transition: all 2s ease-in-out;
}
.hidden{
    height: 0;
}

和JS：

//script for slide down reveal for table 
//to avoid taking up too much space 
function toggleFlipFlop() {
    var toggleSwitch = $("#toggleSwitch");
    var slider = $("#slider");
    console.log("HTML elements translated to objects");
    function slideMe(slider) {
        slider.toggleClass("hidden");
        console.log("hidden class toggled");
    };
    console.log("SlideMe() successfully defined");
    toggleSwitch.onclick = slideMe(slider); 
    console.log("onclick attribute of toggleswitch set");
}

Answer 1

你过度复杂了。您使用内联img-src 'self' data: blob:调用一个函数来实例化一个函数，该函数再次调用同一个按钮上的点击... ehh

此外，由于您无法在CSS3中可靠地设置动画/切换高度，请使用jQuery onClick

slideToggle()

function toggleFlipFlop() {
  $("#slider").slideToggle(1000);
}


// REMOVE inline JS: onClick="toggleFlipFlop();"
// and use this:
$("#toggleSwitch").on("click", toggleFlipFlop);

#slider {
  height: 1530px;
  width: 524.317px;
  /*transition: all 1s ease-in-out; you cannot use this I'm sorry. */
}

.hidden {
  display: none; /* use this instead */
}

是的。您无法在CSS3中可靠地转换<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h2><strong>SPRING CONVENTION SCHEDULE OF EVENTS</strong></h2> <br> <button id="toggleSwitch">Click here to show table</button>  <div id="slider" class="hidden"> <table id="friday-table"> <tbody> <tr> <th colspan="2"><strong>SCHEDULE OF EVENTS FOR FRIDAY, MARCH 31</strong></th> </tr> <tr> <td>3:45 - 5:00</td> <td>CONVENTION REGISTRATION</td> </tr> <tr> <td>4:30 - 5:15</td> <td>GRAPHIC ARTS REGISTRATION</td> </tr> <tr> <td>4:30 - 4:50</td> <td>CANDIDATES MEETING</td> </tr> <tr> <td>5:15 - 5:25</td> <td>SPIRIT COMPETITION</td> </tr> <tr> <td>5:25 - 6:00</td> <td>GENERAL ASSEMBLY</td> </tr> <tr> <td>7:00 - 9:00</td> <td>COSTUME CONTEST</td> </tr> <tr> <td>7:30 - 9:00</td> <td>SKIT CONTEST</td> </tr> <tr> <td>7:15 - 8:00</td> <td>ESSAY CONTEST</td> </tr> <tr> <td>8:00 - 8:30</td> <td>IMPROMPTU ART</td> </tr> <tr> <td>8:00 - 9:30</td> <td>SERVICE PROJECT</td> </tr> <tr> <td>8:00 - 9:30</td> <td>BOARD GAMES</td> </tr> </tbody> </table>  <table id="saturday-table"> <tbody> <tr> <th colspan="2"><strong>SCHEDULE OF EVENTS FOR SATURDAY, APRIL 1</strong></th> </tr> <tr> <td>8:00 - 9:00</td> <td>SCRAPBOOK CHECK-IN</td> </tr> <tr> <td>8:00 - 9:00</td> <td>GRAPHIC ARTS</td> </tr> <tr> <td>8:15 - 8:45</td> <td>CONVENTION REGISTRATION AND SATURDAY CHECK-IN</td> </tr> <tr> <td>9:00 - 10:00</td> <td>ACADEMIC TESTING (all levels)</td> </tr> <tr> <td>10:15 - 10:45</td> <td>SEMINAR SESSION I</td> </tr> <tr> <td>10:30 - 12:30</td> <td>DRAMATIC INTERPRETATION</td> </tr> <tr> <td>10:30 - 11:00</td> <td>MIDDLE SCHOOL CERTAMEN FINALS</td> </tr> <tr> <td>11:00 - 11:30</td> <td>SEMINAR SESSION II</td> </tr> <tr> <td>11:00 - 11:30</td> <td>ADVANCED CERTAMEN FINALS</td> </tr> <tr> <td>11:30 - 12:00</td> <td>INTERMEDIATE CERTAMEN FINALS</td> </tr> <tr> <td>12:00 - 12:30</td> <td>NOVICE CERTAMEN FINALS</td> </tr> <tr> <td>12:30 - 3:00</td> <td>GRAPHIC ARTS VIEWING</td> </tr> <tr> <td>12:45 - 1:30</td> <td>"MEET THE CANDIDATES" MEETING</td> </tr> <tr> <td>1:00 - 2:30</td> <td>LATIN SIGHT READING</td> </tr> <tr> <td>1:00 - 2:30</td> <td>ENGLISH ORATORY</td> </tr> <tr> <td>1:00 - 2:30</td> <td>OPEN CERTAMEN</td> </tr> <tr> <td>1:30 - 2:30</td> <td>OLYMPIKA I</td> </tr> <tr> <td>2:00</td> <td>VOTING BALLOTS DUE</td> </tr> <tr> <td>3:00 - 4:00</td> <td>OLYMPIKA II</td> </tr> <tr> <td>3:00 - 3:30</td> <td>CHARIOT RACING AND CATAPULT</td> </tr> <tr> <td>3:00 - 3:30</td> <td>GRAPHIC ARTS PICKUP</td> </tr> <tr> <td>4:20 - 4:30</td> <td>SPIRIT COMPETITION</td> </tr> <tr> <td>4:30 - 5:00</td> <td>CLOSING GENERAL ASSEMBLY</td> </tr> </tbody> </table> </div>。（最终的最小高度，但即使它不完美）

我的滑块拒绝滑动，它只是消失了

1 个答案: