Question

我有一个包含3个单选按钮列表的页面和一个用于选择报告的jqueryUI“按钮”。

但是，“按钮”第一次出现时没有出现在正确的位置.show（）n我无法理解为什么。

对show（）的第二次/后续调用将按钮移动到正确的位置。删除显示：从按钮的css开始，将它放在正确的位置，所以我不知道为什么它出现在错误的地方？

为大量代码道歉 - 我已将所有内容放在一个视图中进行演示：

<style type="text/css">
    .fieldset_Rule
{
    display: inline;
    vertical-align:top;
}
.fieldset_Rule legend
{
    font-size: 1em;
}
.radio_Rule
{
    margin-right: 10px;
}
.fieldset_Accounts
{
    display: inline;
    vertical-align:top;
}
.fieldset_Accounts legend
{
    font-size: 1em;
}
.radio_Accounts
{
    margin-right: 10px;
}
.fieldset_Display
{
    display: inline;
    vertical-align:top;
}
.fieldset_Display legend
{
    font-size: 1em;
}
.radio_Display
{
    margin-right: 10px;
}
span#reportlink
{
    margin-top:10px;
    padding: .4em 1em .4em 20px;
    text-decoration: none;
    cursor: default;
    position:absolute;
    display:inline;
    float:left;
}

span#reportlink span.ui-icon
{
    margin: -8px 5px 0 0;
    left: .2em;
    top: 50%;
    float: left;
    position: absolute;
}

span#reportlink:hover
{
    cursor: pointer;
    color: #0060a9;
}

div.reportloading
{
    padding: 10px;
    color: #002c5a;
    font-size: 1.5em;
}

span.reportloadingtext
{
    background-position: left center;
    background-image: url('ajax-loader.gif');
    background-repeat: no-repeat;
    padding-left: 40px;
    padding-top: 15px;
    padding-bottom: 15px;
}
</style>
<script src="../../Scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.16.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.blockUI.js" type="text/javascript"></script>
<link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript">
    /// <reference path="jquery-1.6.4-vsdoc.js" />
    var rule = '';
    var accounts = '';
    var display = '';
    var url = '';

    $(document).ready(function () {

        $('#reportlink').click(function () {
            $.blockUI({
                message: '<div class="reportloading"><span class="reportloadingtext">Loading Report...</span></div>'
            }
                );
            $(location).attr('href', url);
        });

        $('input[name="Rule"]').change(function () {
            rule = $(this).val();
            SetReportLink();
        });

        $('input[name="Accounts"]').change(function () {
            accounts = $(this).val();
            SetReportLink();
        });

        $('input[name="Display"]').change(function () {
            display = $(this).val();
            SetReportLink();
        });

        $('#reportlink').toggle();
    });

    function SetReportLink() {
        url = '/TestMvc/' + rule + '/report/' + accounts + "/" + display;
        if (rule != '' && accounts != '' && display != '') {
            $('#reportlink').show('fast');
            $('#reportlink').hover(
                    function () { $(this).addClass('ui-state-hover'); },
                    function () { $(this).removeClass('ui-state-hover'); }
                );
        }
    }
</script>
<h2>
    Please select one option from each of the following:
</h2>
<fieldset class="fieldset_Rule"><legend>Rule Type</legend>
<div class="radio_Rule"><input id="Rule_I" name="Rule" type="radio" value="I" /><label for="Rule_Irs">I</label></div>
<div class="radio_Rule"><input id="Rule_L" name="Rule" type="radio" value="L" /><label for="Rule_Liquid">L</label></div>
</fieldset>

<fieldset class="fieldset_Accounts"><legend>Accounts</legend>
<div class="radio_Accounts"><input id="Accounts_All" name="Accounts" type="radio" value="All" /><label for="Accounts_All">All</label></div>
<div class="radio_Accounts"><input id="Accounts_Local" name="Accounts" type="radio" value="Local" /><label for="Accounts_Local">Local</label></div>
</fieldset>

<fieldset class="fieldset_Display"><legend>Display As</legend>
<div class="radio_Display"><input id="Display_Equivalent" name="Display" type="radio" value="Equivalent" /><label for="Display_Equivalent">Equivalent</label></div>
<div class="radio_Display"><input id="Display_Natural" name="Display" type="radio" value="Natural" /><label for="Display_Natural">Natural</label></div>
</fieldset>

<span id="reportlink" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-search">
</span>Get Report</span>

非常感谢任何帮助！

Answer 1

调用show（）时，display：block样式将应用于该元素。因此，如果它是内联元素，请避免使用show（）并执行

$("selector").css('display','inline');

调用Show（）时，停止JQuery元素显示错误位置的元素？

1 个答案: