Question

我在使用Spotfire时遇到了烦人的问题。它发生在桌面（我的主要焦点）和Web客户端。

我创建了一个菜单，当用户将鼠标悬停在其上并且一切正常时，该菜单会崩溃。好吧，几乎所有事情。

无论出于何种原因，一旦我尝试单击此菜单中的下拉列表中的某个选项，菜单就会完全关闭，就像创建了一个Mouseout事件一样。

如果我将鼠标悬停在＆＃34;仅限活动状态＆＃34;或＆＃34;非活动＆＃34;，菜单关闭并变为此（这是Mouseout事件的预期行为）

-

以下是使用的代码：

＆＃13;

$(".side-menu").mouseover(function() {
  $(this).css("width", "350px")
});

$(".side-menu").mouseout(function() {
  $(this).css("width", "60px")
});

$(".spota").mouseover(function() {
  $(this).css("background", "#FEB338")
});

$(".spota").mouseout(function() {
  $(this).css("background", "transparent")
});

$(".sel").css({
  "display": "'none",
  "background": "#FEB338"
})

$(".side-menu").css({
  "font-family": "'Roboto', sans-serif",
  "position": "fixed",
  "top": "210px",
  "left": "10",
  "margin": "0",
  "padding": "0",

  "width": "60px",
  "list-style-type": "none",
  "background": "#404040",
  "overflow": "hidden",
  "z-index": "99999",
  "transition": "width 1s"
});

$(".fa").css({
  "font-size": "1rem",
  "margin": "20px 30px 0 22px"
});

$(".spota").css({
  "display": "block",
  "font-size": ".9rem",
  "text-decoration": "none",
  "color": "#FFF",
  "height": "60px"
});

$(".spotli").css({
  "width": "350px"
});

＆＃13;

.filter-names {
  font-size: 13px;
  color: white
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="side-menu" style="overflow:hidden; bottom:28px;">
  <li class="spotli">
    <a class="spota sel" href="#">
      <span class="fa fa-search-plus" aria-hidden="true"></span>
      <span class="filter-names">Case Filter In: <SpotfireControl id="5d0043f39e1d42a5b7e8b1833f4586fa" /></span>
    </a>
  </li>
  <li class="spotli">
    <a class="spota" href="#">
      <span class="fa fa-search-minus" aria-hidden="true"></span>
      <span class="filter-names">Case Filter Out: <SpotfireControl id="59f89f10d0db4d22a096526bdd118cab" /></span>
    </a>
  </li>
  <li class="spotli">
    <a class="spota" href="#">
      <span class="fa fa-wpforms" aria-hidden="true"></span>
      <span class="filter-names">Show Cases: <SpotfireControl id="51adc4b41ba9403bb63e67e87d9d5ba8" /></span>
    </a>
  </li>
</ul>

＆＃13;

这是下拉元素中的HTML：

<span class="filter-names">Show Cases:
    <span id="7a9723d293f9417f8ec57a9662bc290c" style="display: inline-block;" class="sf-element sf-element-control sfc-property sfc-dropdown">
        <div class="sf-element sf-element-dropdown" title="" style="position: relative; width: 81px;">
            <div class="sf-element sf-element-icon" style="position: absolute; top: 1px; left: 71px; height: 18px; width: 18px;">
                <svg width="18px" height="18px">
                    <path d="M4,6 l7,0 l-3.5,3.5 z" fill="currentColor" stroke-width="1" transform="scale(1.2,1.2)" class="Down"></path>
                </svg>
            </div>
            <div class="sf-element sf-element-text-box" style="display: inline-block; word-wrap: break-word; width: 63px;">Inactive ...</div>
            <select class="sf-dropdown-select" style="color: rgb(255, 255, 255); font-family: Arial; background-color: rgb(0,0,0);">
                <option value="0">Any</option>
                <option value="1">Active Only</option>
                <option value="2" selected="selected">Inactive Only</option>
            </select>
        </div>
    </span>
</span>

有没有人见过这样的东西？

Answer 1

您可以使用Spotfire元素中的给定ID来event.stopPropagation()使用.side-menu。

像

这样的东西

$(".spota.filter #51adc4b41ba9403bb63e67e87d9d5ba8").mouseout(function () {
    event.stopPropagation();
});

这将触发菜单的停止传播，防止其折叠并再次触发鼠标悬停事件。

在内部下拉列表选项

1 个答案: