不需要使用jQuery按钮滚动

Unwanted scrolling with jQuery Buttonset

本文关键字：按钮 滚动 jQuery 不需要      更新时间：2023-09-26

jQuery UI按钮/按钮集很适合我。我已经在这个网站上搜索了答案，但仍然没有一个有效的答案。我使用的是jQuery版本1.11.1和jQuery UI版本1.9.2。

我有一个由三个按钮组成的按钮集，我的用户可以点击它来选择他们网站上可用的三种颜色主题中的一种。一旦他们点击按钮，我会在按钮集的右侧显示一个带有选定颜色主题的示例网站横幅。所以我基本上是根据他们的选择来交换一张图片。

相关HTML：

<div style="float:left; width: 275px;">
    <label for="radio">Your Club Website Color Theme</label>
    <div id="colortheme">
        <input type="radio" style="float:left;" id="colortheme1" name="colortheme" value="1" {{ct1}} ><label for="colortheme1">Theme 1</label>
        <input type="radio" style="float:left;" id="colortheme2" name="colortheme" value="2" {{ct2}} ><label for="colortheme2">Theme 2</label>
        <input type="radio" style="float:left;" id="colortheme3" name="colortheme" value="3" {{ct3}} ><label for="colortheme3">Theme 3</label>
    </div>
</div>
<div style="margin-left:300px;">
    <img id="bannerSample" src="/images/club{{BannerTheme}}.jpg" style="max-width:100%">
</div>

相关Javascript：

jQuery("#colortheme input:radio").click(function(e){
   me.$form.hide(); 
   jQuery("#bannerSample").attr('src','/images/club'+this.value+'.jpg'); 
   me.$form.show();
});

注意：｛｛ct1｝｝、｛｛｛ct2｝、&｛｛ct3｝由Perl服务器代码修补；$form只是上面代码片段上方表单集的jQuery对象。此按钮集位于jQuery UI对话框内的选项卡面板中。问题是，当我单击按钮集中的一个按钮时，我会意外地在对话框中向下滚动基于对该网站和其他网站的研究，我尝试了所有常用的解决方案，e.preventDefault（）、e.stopPropagation（）、return false、.on（）等无法找到正确的解决方案或组合来停止不需要的滚动。以上是我能想出的最好的办法。第一次点击时它仍然向下滚动，但在那之后，它只是在更新图像时闪烁。

有人能推荐更好的方法吗

这个问题是由css中的冲突引起的。具体来说，类"ui-helper hidden-accessible"具有绝对位置，由于某种原因，该位置会导致滚动行为。

我选择在自己的样式表中创建一个更具体的规则，以取代默认的jquery ui-css:

.ui-buttonset .ui-helper-hidden-accessible{
    position:relative;
}

或者，您可以使用display:none，但我不确定这是否会在其他浏览器中产生意想不到的后果。我选择了这条路线，而不是重写jquery ui规则，因为我不确定是否有其他ui元素的特定用例需要绝对位置，而且我不想在更新时记住不要覆盖css。

我是通过wordpress漏洞罚单发现的https://core.trac.wordpress.org/ticket/23684尽管需要注意的是，我不是在wordpress网站上工作，所以提出的解决方案是独立的。

相关文章：