隐藏溢出的组中的元素

时间：2015-04-20 11:39:17

标签： javascript jquery overflow hidden explorer

我有IE 11的问题（也许还有其他版本），任何其他浏览器都能正常工作。

我在.btn-inner-group div中有两个按钮。 此div具有属性溢出：隐藏以隐藏两个按钮的边缘。 当我使用资源管理器时，我会点击右键，两个按钮 被移动到左边，整个右边的按钮是可见的（即使是我要隐藏的部分）。

事情是我不想要移动按钮。我想要点击，显示菜单以及它。

以下是要测试的示例代码：

http://jsfiddle.net/s6cq4d0y/3/

＆＃13;
＆＃13; 
function initDropdown(container) {

    // Check if  container is defined.
    // Default is body.
    if( typeof container === 'undefined' ) {
        container = 'body';
    }

    var element = $(container).find('.dropdown');

    element.on('click', function(e) {
        e.preventDefault();
    });

    // Finds dropdown inside desired container.
    element.bind('shown.bs.dropdown', function(e) {
        var dropdown = $(this);
        var menuID = dropdown.attr('data-menu');
        var menu = $('#' + menuID);

        menu.show();
    });

    // Finds dropdown inside desired container.
    element.bind('hide.bs.dropdown', function() {
        var dropdown = $(this);
        var menuID = dropdown.attr('data-menu');
        var menu = $('#' + menuID);

        menu.hide();
    });
}

var $ = jQuery;

jQuery(document).ready(function() {
    initDropdown();
});
＆＃13; 
body {
    background: #336699;
}

ul.buttons {
  padding-left: 0;
  margin: 20px 0;
}
ul.buttons li {
  list-style: none;
  margin-bottom: 10px;
}
ul.buttons li a {
  width: 100%;
}
.btn-right {
  margin-top: 40px;
}
.btn-right .btn {
  float: right;
}
.btn {
  border: none;
  background-color: #f8f8f8;
  font-size: 12px;
}
.btn-inner-group {
  overflow: hidden;
}
.bevel-group {
  float: left;
  -webkit-transform: skew(-30deg);
  transform: skew(-30deg);
  background-color: #f8f8f8;
}
.bevel-group .btn {
  background-color: transparent;
}
.btn.btn-bevel {
  color: #333132;
  padding: 14px 20px 14px 20px;
  -webkit-transform: skew(30deg);
  transform: skew(30deg);
}
.bevel-group.bevel-left {
  float: right;
  margin-right: -16px;
  padding-right: 16px;
}
.bevel-group.bevel-right {
  float: left;
  margin-left: -16px;
  padding-left: 16px;
}
.bevel-group.bevel-grey, .bevel-group.bevel-grey.no-hover-effect {
  background-color: #f8f8f8;
}
.bevel-group.bevel-grey .btn, .bevel-group.bevel-grey.no-hover-effect .btn {
  color: #333132 !important;
}
.bevel-group.active, .bevel-group.bevel-blue, .bevel-group:hover, .bevel-group.no-hover-effect, .bevel-group.bevel-no-hover-effect {
  background-color: #003594;
}
.bevel-group.active .btn, .bevel-group.bevel-blue .btn, .bevel-group:hover .btn, .bevel-group.no-hover-effect .btn, .bevel-group.bevel-no-hover-effect .btn {
  color: #eee !important;
}
.bevel-left .dropdown-menu {
  right: 0;
}
.btn-group .dropdown-menu > li > a {
  white-space: normal !important;
}
.btn.btn-plus::after {
  content: "\00a0\00a0\00a0\00a0\00a0\00a0+";
}
.btn.btn-more:hover, .btn.btn-learn-more:hover {
  color: #fff;
  background-color: #003594 !important;
}
.btn.btn-learn-more {
  height: 50px;
  line-height: 38px;
  text-align: left;
  padding-right: 140px;
  padding-left: 20px;
  color: #fff;
  background: #003594 url('../images/buttons/learn-more.png') no-repeat right top;
}
.btn.btn-go {
  height: 42px;
  line-height: 30px;
  text-align: left;
  background: #f8f8f8 url('../images/buttons/go-blue.png') no-repeat right top;
}
.dropdown-menu {
  box-shadow: none;
  border: 0;
  margin-top: 0;
  left: auto;
  right: auto;
  width: 100%;
  background-color: #f8f8f8;
}
.dropdown-menu a {
  font-size: 12px;
  line-height: 24px;
}

#first-btn-group-ip {
    margin-top: 50px;
    margin-left: 50px;
    border: 1px solid red;
    float: left;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Btn group: IP - Learn more	 / Practice Area -->
<div id="first-btn-group-ip" class="clearfix">
    <div class="btn-group">
        <div class="btn-inner-group clearfix">
            <div class="bevel-group bevel-right active">
			    <a href="http://localhost:8888/hsm/web/intellectual-property/" id="learn-more-jumboton-ip" class="btn btn-bevel btn-group-left">
                    <span class="btn-label">Learn more</span>
                </a>
			</div>
		<div class="bevel-group bevel-left bevel-grey no-hover-effect">
            <div class="dropdown" data-menu="jumbotron-ip-practice-area">
				<button class="btn btn-bevel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					<span class="btn-label">Practice Area</span>
					<span class="caret"></span>
				 </button>
			</div>
		</div>
    </div>
	<ul id="jumbotron-ip-practice-area" class="dropdown-menu">
        <li id="menu-item-448" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-448">
            <a href="http://localhost:8888/hsm/web/intellectual-property?sp=204-2">Trade Marks</a>
        </li>
        <li id="menu-item-447" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-447">
            <a href="http://localhost:8888/hsm/web/intellectual-property?sp=patents">Patents</a>
        </li>
    </ul>
    </div>
</div>
<!-- / Btn group: IP - Patent Guide / Trade Mark Guide -->
＆＃13;
＆＃13;
＆＃13;

您还可以在JSFiddle上看到示例：http://jsfiddle.net/s6cq4d0y/3/

我已经尝试了很多东西，我认为这种行为是有目的的，因为活跃元素应该是完全可见的。这非常好，但在这种情况下我不想要这种行为。你知道如何在IE中关闭这种行为吗？

感谢您的帮助！ 库巴

1 个答案:

答案 0 :(得分：0)

几个小时后，我找到了一个解决方案。 使用 a 而不是 按钮 从未知原因解决问题。

这是示例（请参阅按钮元素的注释掉的代码）：

http://jsfiddle.net/s6cq4d0y/13/


function initDropdown(container) {

    // Check if  container is defined.
    // Default is body.
    if( typeof container === 'undefined' ) {
        container = 'body';
    }

    var element = $(container).find('.dropdown');

    // Finds dropdown inside desired container.
    element.bind('shown.bs.dropdown', function(e) {
        var dropdown = $(this);
        var menuID = dropdown.attr('data-menu');
        var menu = $('#' + menuID);

        menu.show();
    });

    // Finds dropdown inside desired container.
    element.bind('hide.bs.dropdown', function() {
        var dropdown = $(this);
        var menuID = dropdown.attr('data-menu');
        var menu = $('#' + menuID);

        menu.hide();
    });
}

var $ = jQuery;

jQuery(document).ready(function() {
    initDropdown();
});
body {
    background: #336699;
}

.btn-right {
  margin-top: 40px;
}

.btn-right .btn {
  float: right;
}

.btn {
  border: none;
  background-color: #f8f8f8;
  font-size: 12px;
}

.bevel-group {
  float: left;
  -webkit-transform: skew(-30deg);
  transform: skew(-30deg);
  background-color: #f8f8f8;
}

.bevel-group .btn {
  background-color: transparent;
}

.btn.btn-bevel {
  color: #333132;
  padding: 14px 20px 14px 20px;
  -webkit-transform: skew(30deg);
  transform: skew(30deg);
}

.btn-inner-group {
  overflow-x: hidden;
}

.bevel-group.bevel-left {
  float: right;
  margin-right: -16px;
  padding-right: 16px;
}

.bevel-group.bevel-right {
  float: left;
  margin-left: -16px;
  padding-left: 16px;
}

.bevel-group.bevel-grey, .bevel-group.bevel-grey.no-hover-effect {
  background-color: #f8f8f8;
}

.bevel-group.bevel-grey .btn, .bevel-group.bevel-grey.no-hover-effect .btn {
  color: #333132 !important;
}

.bevel-group.active, .bevel-group.bevel-blue, .bevel-group:hover, .bevel-group.no-hover-effect, .bevel-group.bevel-no-hover-effect {
  background-color: #003594;
}

.bevel-group.active .btn, .bevel-group.bevel-blue .btn, .bevel-group:hover .btn, .bevel-group.no-hover-effect .btn, .bevel-group.bevel-no-hover-effect .btn {
  color: #eee !important;
}

.bevel-left .dropdown-menu {
  right: 0;
}

.btn-group .dropdown-menu > li > a {
  white-space: normal !important;
}

.dropdown-menu {
  box-shadow: none;
  border: 0;
  margin-top: 0;
  left: auto;
  right: auto;
  width: 100%;
  background-color: #f8f8f8;
}

.dropdown-menu a {
  font-size: 12px;
  line-height: 24px;
}

#first-btn-group-ip {
    margin-top: 50px;
    margin-left: 50px;
    border: 1px solid red;
    float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Btn group: IP - Learn more	 / Practice Area -->
<div id="first-btn-group-ip" class="clearfix">
    <div class="btn-group">
        <div class="btn-inner-group clearfix">
            <div class="bevel-group bevel-right active">
			    <a class="btn btn-bevel btn-group-left">
                    <span class="btn-label">Learn more</span>
                </a>
			</div>
		<div class="bevel-group bevel-left bevel-grey no-hover-effect">
            <div class="dropdown" data-menu="jumbotron-ip-practice-area">
				<!--<button class="btn btn-bevel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					<span class="btn-label">Practice Area</span>
					<span class="caret"></span>
				 </button>-->
                <a class="btn btn-bevel" data-toggle="dropdown">
                    <span class="btn-label">Practice Area</span>
					<span class="caret"></span>
                </a>
			</div>
		</div>
    </div>
	<ul id="jumbotron-ip-practice-area" class="dropdown-menu">
        <li id="menu-item-448" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-448">
            <a href="http://localhost:8888/hsm/web/intellectual-property?sp=204-2">Trade Marks</a>
        </li>
        <li id="menu-item-447" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-447">
            <a href="http://localhost:8888/hsm/web/intellectual-property?sp=patents">Patents</a>
        </li>
    </ul>
    </div>
</div>
<!-- / Btn group: IP - Patent Guide / Trade Mark Guide -->

我希望它可以帮助任何有相同或类似问题的人头疼。

库巴

相关问题
最新问题