TYPO3 Fluid elseif with && condition

Question

I'm trying to get this code working:

<f:if condition="{item.spacer} || {item.current}">
  <f:then>
    <li class="{f:if(condition:item.current, then:'nav-item active')}{f:if(condition:item.spacer, then:'nav-item spacer')}">
      <f:render partial="Navigation/Elements/Link" arguments="{item: item}"/>
  </f:then>
  <f:else if="{item.children} && {item.active}">
    <li class="nav-item dropdown active">
      <f:render partial="Navigation/Elements/Link" arguments="{item: item}"/>
  </f:else>
  <f:else if="{item.children}">
    <li class="{f:if(condition:item.children, then:'nav-item dropdown')}">
      <f:render partial="Navigation/Elements/Link" arguments="{item: item}"/>
  </f:else>
  <f:else if="{item.active}">
    <li class="{f:if(condition:item.active, then:'nav-item active')}">
      <f:render partial="Navigation/Elements/Link" arguments="{item: item}"/>
  </f:else>
  <f:else>
    <li class="nav-item">
      <f:render partial="Navigation/Elements/Link" arguments="{item: item}"/>
  </f:else>
</f:if>

The li-tag is closed afterwards in parent partial. The only thing not working ist the combined condition in the first else if. Altough item.children and item.active are true, the condition only consisting of item.active is rendered. What am I doing wrong here?

Thanks, Jonathan

Answer 1

Active MenuItems have current=1 and active=1. In the first If-condition, current is checked and if =1, the following 'then' gets executed. After this, none of the others is checked and because of that, it didn't work. As I don't need {item.spacer} || {item.current} {item.spacer} || {item.current} , this code works for me:

<f:if condition="{item.children} && {item.active}">
<f:then>
  <li class="nav-item dropdown active">
    <f:render partial="Navigation/Elements/Link" arguments="{item: item}"/>
</f:then>
<f:else if="{item.children}">
  <li class="nav-item dropdown">
    <f:render partial="Navigation/Elements/Link" arguments="{item: item}"/>
</f:else>
<f:else if="{item.active}">
  <li class="nav-item active">
    <f:render partial="Navigation/Elements/Link" arguments="{item: item}"/>
</f:else>
<f:else if="{item.spacer}">
  <li class="nav-item spacer">
    <f:render partial="Navigation/Elements/Link" arguments="{item: item}"/>
</f:else>
<f:else>
  <li class="nav-item">
    <f:render partial="Navigation/Elements/Link" arguments="{item: item}"/>
</f:else>
</f:if>