0

我正在使用出色的 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'
            });
});
4

2 回答 2

1

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

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

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

于 2013-02-19T08:59:01.343 回答
0

弄清楚..你错过了<a>结束标签...</a>

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

在这里尝试小提琴

于 2013-02-19T09:05:25.027 回答