jquery - 找不到创建此边框的原因,让我发疯?

标签 jquery css toggle border

我的切换图像周围有一个边框,我终生都想不通为什么 - 这是基于 http://net.tutsplus.com/tutorials/wordpress/how-to-create-a-better-wordpress-options-panel/ 的自定义选项面板

见附图:enter image description here

在我的函数中,它是如何用标记创建的

<div class="rm_section">
<div class="rm_title">
<h3><img class="inactive" alt="">
<?php echo $value['name']; ?></h3><span class="submit"><input name="save<?php echo $i; ?>" type="submit" value="Save changes" />
</span><div class="clearfix"></div></div>
<div class="rm_options">

我的 CSS

.rm_wrap{
    width:740px;
}

.rm_section{

}

.rm_opts label{
    font-size:12px;
    font-weight:700;
    width:200px;
    display:block;
    float:left; 
    color:#444
}
.rm_input {
    padding:30px 15px;
    border-bottom:1px solid #ddd;
    border-top:1px solid #fff;
    margin:8px 0 0;
    background:#f9f9f9;
    -webkit-box-shadow: inset 0px 0px 7px #DDD;
    -moz-box-shadow: inset 0px 0px 7px #DDD;
    box-shadow: inset 0px 0px 7px #DDD;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px
}
.rm_opts small{
    display:block;
    float:right;
    width:200px;
    color:#999
}
.rm_opts input[type="text"], .rm_opts select{
    width:280px;
    font-size:12px;
    padding:4px;
    color:#333;
    line-height:1em;
    background:#f3f3f3;
}
.rm_input input:focus, .rm_input textarea:focus{
        background:#fff;
}
.rm_input textarea{
    width:280px;
    height:175px;
    font-size:12px;
    padding:4px;
    color:#333;
    line-height:1.5em;
    background:#f3f3f3;
}
.rm_title h3 {
    cursor:pointer;
    font-size:1.2em;
    margin:17px 0 0;
    color:#333;
    float:left;
    width:80%;
    font-weight:normal;
    padding:0 4px;
}
.rm_title{
    cursor:pointer;
    border-bottom:1px solid #ddd;
    background:#eee;
    -webkit-box-shadow: inset 0px 0px 7px #DDD;
    -moz-box-shadow: inset 0px 0px 7px #DDD;
    box-shadow: inset 0px 0px 7px #DDD;
    padding:0;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px
    }

.rm_title h3 img.inactive{
    margin:-7px 10px 0 5px;
    width:32px;
    height:32px;    
    background:url('images/pointer.png') no-repeat 0 0;
    float:left;
    border:none!important
}

.rm_title h3 img.active{
    margin:-7px 10px 0 5px;
    width:32px;
    height:32px;    
    background:url('images/pointer.png') no-repeat  0 -32px;
    float:left;
    border:none!important
}

.rm_title h3:hover img{
    border:none
}

.rm_title span.submit{
    display:block;
    float:right;
    margin:0;
    padding:0;
    width:15%;
    padding:14px 0;
}

.clearfix{
    clear:both;
}

.rm_table th, .rm_table td{
    border:1px solid #bbb;
    padding:10px;
    text-align:center;
}

.rm_table th, .rm_table td.feature{
    border-color:#888;
    }

jQuery

jQuery(document).ready(function(){
        jQuery('.rm_options').slideUp();

        jQuery('.rm_section h3').click(function(){
            if(jQuery(this).parent().next('.rm_options').css('display')==='none')
                {   jQuery(this).removeClass('inactive').addClass('active').children('img').removeClass('inactive').addClass('active');

                }
            else
                {   jQuery(this).removeClass('active').addClass('inactive').children('img').removeClass('active').addClass('inactive');
                }

            jQuery(this).parent().next('.rm_options').slideToggle('slow');
        });
});

最佳答案

通常,您不希望图像周围有边框,因此请尝试像这样明确设置图像的边框宽度:

img { border:0px; }

如果您确实希望图像周围有边框,只需覆盖上面的内容即可。

编辑

我看到您已经在样式表中指定了一些图像类。不要将边框样式设置为 none,而是尝试将边框宽度设置为 0。我还会在使用 !important

之前添加一个空格

关于jquery - 找不到创建此边框的原因,让我发疯?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7916908/

相关文章:

javascript - 使用 jquery 填充模态表单

javascript - 如何使网页跟随浏览器窗口的大小,并且在调整大小时,布局不会失真?

css - Bootstrap 导航栏样式更改切换

jquery - 为什么页面在 JQuery ajax 调用后重新加载?

javascript - 根据选择输入更改输入值

php - 根据第一个选择选项更改表单选择选项?

html - 为 ul-navigation 添加标题

css - 如何在嵌入的内容中隐藏 Youtube 控件、标题和 Logo

javascript - jQuery 多面板切换

javascript - 我正在尝试通过 IsFormDisplayed 函数切换 boolean 值