javascript - 语义 ui - 根据是否切换另一个组件设置侧边栏属性

Question

我有两个语义侧边栏，一个在左侧，一个在右侧。目前，当仅切换左侧时，页面会变暗，而当选择右侧时，页面不会变暗。我想要实现的是，当我将左侧边栏切换为打开并且右侧边栏已切换时，我希望页面变暗。

切换右侧边栏的代码:

  getHistory(){
    $('#sidebar1').sidebar({dimPage:false,overlay:true,closable:false}).sidebar('toggle');

    this.historyPane = true;
  }

切换左侧边栏的代码:

onSubmit(event){
    if(event.key=="Enter"){
    .
    .
    .
    $('#sidebar').sidebar({overlay:false,dimPage:true}).sidebar('toggle');
    }

我尝试使用 .is(:visible) 方法检查左侧边栏是否可见，但是即使未切换侧边栏，该方法也会返回 true。有什么建议我可以如何实现这一目标吗？

Answer 1

您可以使用此 SUI 方法检查是否打开了另一个侧边栏:

$('#sidebar1').sidebar("可见")

有了这个，你就可以做这样的事情

onSubmit(event){
if(event.key=="Enter"){

.
.
.

const shouldDimPage = $('#sidebar1').sidebar("is visible")
$('#sidebar').sidebar({overlay:false, dimPage: shouldDimPage}).sidebar('toggle');
}

同样，如果需要，您可以使用$('#sidebar1').sidebar('is hide')