Question

我正在使用精彩的UL-slide jQuery插件。通常我没有问题，但现在我遇到了一些问题：

我正在进行星期五测验，我希望这些问题能够在回答时滑落。但是，当我点击框滑动到“中间框架”而不是下一个li。

以下是我的网站：http://carlpapworth.com/friday-quiz/

这是我的代码：

HTML：

  <ul id="qBox">
    <!--Q1-->           <li class="qContainer">
                            <div class="qQuestion">Question I
                            </div>
                            <ul class="qAnswers">
                                <li><a href="#" class="qWrong"><h3>Answer 1</h3></li>
                                <li><a href="#" class="qCorrect"><h3>Answer 2</h3></li>
                                <li><a href="#" class="qWrong"><h3>Answer 3</h3></li>
                            </ul>
                        </li>
    <!--Q2-->           <li class="qContainer">
                            <div class="qQuestion">Question II
                            </div>
                            <ul class="qAnswers">
                                <li><a href="#" class="qWrong"><h3>Answer 1</h3></li>
                                <li><a href="#" class="qCorrect"><h3>Answer 2</h3></li>
                                <li><a href="#" class="qWrong"><h3>Answer 3</h3></li>
                            </ul>
                        </li>
    <!--Q3-->           <li class="qContainer">
                            <div  class="qQuestion">Question III
                            </div>
                            <ul class="qAnswers">
                                <li><a href="#" class="qWrong"><h3>Answer 1</h3></li>
                                <li><a href="#" class="qCorrect"><h3>Answer 2</h3></li>
                                <li><a href="#" class="qWrong"><h3>Answer 3</h3></li>
                            </ul>
                        </li>
    </ul>

CSS：

#qBox{
width: 2000px;
height: 260px;
}

li.qContainer {
/*
position: relative;
width: 100%!important;
height: 100%!important;
padding: 0px 0px;
float: left;
border: solid 1pt;
*/
}

.qQuestion {
width: 480px;
height: 50px;
padding: 10px 0px;
font-family: corbel;
font-size: 34px;
text-align: center;
color: #ffffff;
}

.qQuestion:after {
content: url(../images/questionShadow.png);
width: 100%;
margin-top: -24px;
padding: 0 0 20px 0;
height: 2px;
display: block;
}

.qAnswers {
width: 460px;
padding: 10px;
height: auto;
text-align: center;
}

.qAnswers li {
height: 30px;
padding: 10px;
}

.qAnswers li:after {
content: url(../images/questionShadow.png);
width: 100%;
margin-top: -8px;
height: 2px;
display: block;
}

.qAnswers li a{
width: 100%;
font-family: silverfake;
font-size: 26p
}

JS：

$(document).ready(function() {
            $('#qBox').ulslide({
                    effect: {
                        type: 'slide', // slide or fade
                        axis: 'x',     // x, y
                        distance: 0   // Distance between frames
                    },
                    duration: 2000,
                    autoslide: 0,
                    width: 500,
                    height: 300,
                    mousewheel: false,
                    nextButton: '.qAnswers a',
                    prevButton: '#e1_prev'
            });
});

Answer 1

您的HTML代码存在一些问题，请查看您的LI：

 <li><a href="#" class="qWrong"><h3>Answer 1</h3></li>

你的A没有关闭，我认为这是你的问题。

Answer 2

弄清楚..您遗失了<a>结束标记... </a>

<li><a href="#" class="qWrong"><h3>Answer 1</h3></a></li>   
                                            ----^^^---- here

在小提琴here

中试一试

ul.slide jQuery插件问题

2 个答案: